Preguntas etiquetadas con css-animations

Las animaciones CSS permiten animar las transiciones de una configuración de estilo CSS a otra. El módulo CSS describe una forma en que los autores pueden animar los valores de las propiedades CSS a lo largo del tiempo, utilizando fotogramas clave. El comportamiento de estas animaciones de fotogramas clave se puede controlar especificando su duración, número de repeticiones y comportamiento de repetición.

4
Mantener el estado final al final de una animación CSS3
Estoy ejecutando una animación en algunos elementos configurados opacity: 0;en CSS. La clase de animación se aplica en Click, y, usando fotogramas clave, cambia la opacidad de 0a 1(entre otras cosas). Desafortunadamente, cuando termina la animación, los elementos vuelven a opacity: 0(tanto en Firefox como en Chrome). Mi pensamiento natural …
10
Cómo hacer que el texto parpadee / parpadee con CSS 3
Actualmente, tengo este código: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } Parpadea, pero solo parpadea en "una dirección". Quiero decir, solo se desvanece, y luego aparece de nuevo con …
11
css3 animación de transición en carga?
¿Es posible usar la animación de transición CSS3 en la carga de la página sin usar Javascript? Esto es algo de lo que quiero, pero en la carga de la página: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html Lo que encontré hasta ahora CSS3 transición-retraso , una forma de retrasar los efectos en los elementos. Solo …
8
Detener una animación CSS3 en el último fotograma
Tengo una animación CSS3 de 4 partes que se reproduce al hacer clic, pero la última parte de la animación está destinada a sacarla de la pantalla. Sin embargo, siempre vuelve a su estado original una vez que ha jugado. Alguien sabe cómo puedo detenerlo en su último marco CSS …
8
CSS3 Spin Animation
He revisado algunas demostraciones y no tengo idea de por qué no puedo hacer que funcione el giro CSS3. Estoy usando la última versión estable de Chrome. El violín: http://jsfiddle.net/9Ryvs/1/ div { margin: 20px; width: 100px; height: 100px; background: #f00; -webkit-animation-name: spin; -webkit-animation-duration: 40000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; …
9
CSS: Animación vs. Transición
Entonces, entiendo cómo realizar transiciones CSS3 y animaciones. Lo que no está claro, y he buscado en Google, es cuándo usar cuál. Por ejemplo, si quiero hacer que una pelota rebote, está claro que la animación es el camino a seguir. Podría proporcionar fotogramas clave y el navegador haría los …
9
Imitando una etiqueta de parpadeo con animaciones CSS3
Realmente quiero hacer que un texto parpadee al estilo de la vieja escuela sin usar javascript o decoración de texto. ¡Sin transiciones, solo * parpadeo *, * parpadeo *, * parpadeo *! EDITAR : Esto es diferente de esa pregunta porque pido parpadeo sin transiciones continuas, mientras que OP de …
30
Texto borroso después de usar CSS transform: scale (); en cromo
Parece que ha habido una actualización reciente de Google Chrome que causa texto borroso después de hacer una transform: scale(). Específicamente estoy haciendo esto: @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); …
5
Reproduce varias animaciones CSS al mismo tiempo
¿Cómo puedo hacer que dos animaciones CSS se reproduzcan a diferentes velocidades ? La imagen debe girar y crecer al mismo tiempo. La rotación tendrá un ciclo cada 2 segundos. El crecimiento tendrá un ciclo cada 4 segundos. Código de ejemplo: .image { position: absolute; top: 50%; left: 50%; width: …
11
Retraso de la animación CSS en la repetición
Recientemente descubrí cómo usar "correctamente" las animaciones CSS (anteriormente las descarté por no poder hacer secuencias complejas como lo haría en JavaScript). Así que ahora estoy aprendiendo sobre ellos. Para este efecto, estoy tratando de tener un "destello" de degradado que recorra un elemento similar a una barra de progreso. …
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.