Regla @keyframes CSS

En CSS, la regla @keyframes se puede usar para crear animaciones, las animaciones se crean mediante el cambio gradual de un estilo CSS a otro, durante el proceso de animación, puede cambiar múltiples veces la configuración del estilo CSS, el cambio especificado ocurre cuando se utiliza %, o los términos clave "from" y "to", que son equivalentes a del 0％ al10El 0％ es igual, el 0％ es el inicio del animación,10El 0％ es cuando el animación se completa. Para obtener el mejor soporte del navegador, debe definirse siempre como 0％ y10Selector del 0％.

@keyframes规则是css3La regla @keyframes es css 9y versiones anteriores de los navegadores. Se han añadido nuevas reglas en navegadores más recientes, actualmente todos los navegadores principales admiten esta regla (con el prefijo del navegador correspondiente), pero no es compatible con IE

Sintaxis de uso de la regla @keyframes

La sintaxis de esta regla es:

@keyframes animationname {keyframes-selector {css-styles;}};

Descripción de los valores de atributo

animationname: define el nombre de la animación;

keyframes-selector: el porcentaje del tiempo de duración de la animación, posibles valores: 0-100%, from (y 0% idéntico), to (y100% idéntico). Puede usar un keyframes de animación-selectores;

css-styles: una o más propiedades de estilo CSS válidas;

El siguiente ejemplo muestra la regla real de @keyframes.

　　　　　　.box {
　　　　　　　　　　width:　50px;
　　　　　　　　　　height:　50px;
　　　　　　　　　　background: red;
　　　　　　　　　　position: relative;
　　　　　　　　　　/*　Chrome, Safari, Opera　*/
　　　　　　　　　　-webkit-animation-name: moveit;
　　　　　　　　　　-webkit-animation-duration:　2s;
　　　　　　　　　　
　　　　　　　　　　animation-name: moveit;
　　　　　　　　　　animation-duration:　2s;
　　　　　　}
　　　　　　　
　　　　　　/*　Chrome, Safari, Opera　*/
　　　　　　@-webkit-keyframes moveit {
　　　　　　　　　　from {left: 0;}
　　　　　　　　　　to {left:　50%;}
　　　　　　}
　　　　　　　
　　　　　　
　　　　　　@keyframes moveit {
　　　　　　　　　　from {left: 0;}
　　　　　　　　　　to {left:　50%;}
　　　　　　}

Parámetro

La tabla a continuación describe los parámetros de esta regla.

Compatibilidad del navegador

La compatibilidad del navegador del atributo @keyframes, los números en la tabla a continuación representan la versión mínima del navegador que admite esta propiedad; todos los navegadores principales admiten esta regla.

Leer más

Consulte las siguientes instrucciones:Tipos de medios CSS.