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.
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...
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);
¿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...
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 (100%) , o cómo...
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:...
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...
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...
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:...
¿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:...
Algo así de simple debería lograrse fácilmente, sin embargo, me estoy tirando de los pelos por lo complicado que es. Todo lo que quiero hacer es animar el montaje y desmontaje de un componente React, eso es todo. Esto es lo que he probado hasta ahora y por qué cada solución no...
Estoy tratando de mantener una propiedad de animación CSS después de completar, ¿es posible? Esto es lo que estoy tratando de lograr ... El elemento debe estar oculto cuando el usuario aterriza en la página, después de 3 segundos (o lo que sea), debe aparecer y una vez que la animación se ha...
Estoy tratando de animar una elipsis y me preguntaba si era posible con animaciones CSS ... Entonces podría ser como Loading... Loading.. Loading. Loading... Loading.. Y básicamente continúa así. ¿Algunas ideas? Editar: así: http://playground.magicrising.de/demo/ellipsis.html...
He echado un vistazo pero no encuentro lo que estoy buscando. Actualmente tengo una animación css en mi página que se activa por: hover. Me gustaría que esto cambiara a 'hacer clic' o 'tocar' cuando el tamaño de la página supere los 700 px de ancho mediante consultas de medios. Esto es lo que...
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...
Estoy tratando de crear una animación de estilo de montaña rusa con CSS. Quiero saber cómo curvar la "montaña rusa" cuando está en la etapa de bucle. Estoy buscando una solución totalmente CSS, pero si necesito un poco de JavaScript, estoy de acuerdo con eso. mi código hasta ahora: #container...