Animaciones CSS

Para ver la animación en el cuadro a continuación, haga clic en la casilla de verificación 'Reproducir la animación' o pase el cursor sobre el cuadro. Cuando la animación está activa, la nube en la parte superior cambia de forma, caen copos de nieve y el nivel de nieve en la parte inferior aumenta. Para pausar la animación, desmarque la casilla de verificación o aleje el cursor de la casilla.

Esta animación de muestra usa animation-iteration-count para hacer que los copos caigan repetidamente, animation-direction para hacer que la nube se mueva de un lado a otro, animation-fill-mode para aumentar el nivel de nieve en respuesta al movimiento de la nube y animation-play-state para pausar la animación.

Para ver el código de esta animación, vea la fuente en GitHub.

• animation abreviatura
• animation-composition
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• animation-timeline

• @keyframes

Todas las animaciones, incluso aquellas con 0 segundos de duración, lanzan eventos de animación.

• animationstart
• animationend
• animationcancel
• animationiteration

• API de animaciones web
• AnimationEvent
• CSSKeyframeRule
• CSSKeyframesRule

Usando animaciones CSS

Tutorial paso a paso sobre cómo crear animaciones usando CSS. Este artículo describe las propiedades CSS y las reglas arroba relacionadas con la animación y cómo interactúan entre sí.

Consejos y trucos de animación CSS

Consejos y trucos para ayudarlo a aprovechar al máximo las animaciones CSS.

• Propiedad CSS will-change
• Tipo de dato <easing-function>
• Consulta de medios prefers-reduced-motion
• Término del glosario Bezier curve

• Animaciones CSS basadas en desplazamiento
• Propiedades en el módulo CSS transitions para activar animaciones en función de las acciones del usuario
• El elemento HTML <canvas> junto con la API de canvas y la API de WebGL para dibujar gráficos y animaciones
• La interfaz SVGAnimationElement para todas las interfaces de elementos relacionados con la animación, incluidas SVGAnimateElement, SVGAnimateElement, SVGAnimateColorElement, SVGAnimateMotionElement y SVGAnimateTransformElement