Por estudios anteriores, sabemos que se puede lograr una animación de transición simple utilizando el atributo de transición, pero la animación de transición solo puede especificar los estados inicial y final. Todo el proceso está controlado por una función específica, que no es muy flexible. En esta sección presentaremos una animación más compleja: la animación.
Animación: similar a la transición, se pueden lograr algunos efectos dinámicos, la diferencia es que la transición debe activarse cuando cambia un determinado atributo, mientras que los efectos de animación pueden activar automáticamente efectos dinámicos. Para configurar efectos de animación, primero debe establecer un fotograma clave. Los fotogramas clave configuran cada paso de la ejecución de la animación. El formato de la configuración de fotogramas clave es el siguiente:
<estilo>/*Definir fotogramas clave de animación. El nombre del fotograma clave es prueba*/@keyframestest{/*from indica la posición inicial de la animación, que también se puede expresar en 0%. */from{margin-left:0;}/*to indica la posición final de la animación, que también se puede expresar en 100%. */a{margin-left:100%;}}</style>La animación en CSS es similar a la animación cuadro por cuadro en flash. Es delicada y muy flexible. El uso de animación en CSS puede reemplazar imágenes dinámicas, animaciones Flash o efectos especiales implementados en JavaScript en muchas páginas web.
La animación es el efecto de cambiar gradualmente un elemento de un estilo a otro. Podemos cambiar tantos estilos como queramos tantas veces como queramos (respuesta muy oficial).
Propiedad CSS3animation (animación).
@fotogramas clave
Con la regla @keyframes podemos crear animaciones.
Las animaciones se crean cambiando gradualmente un conjunto de estilos CSS por otro. Podemos cambiar este conjunto de estilos CSS varias veces durante la animación. Especifique el momento en que se produce el cambio como porcentaje, o mediante las palabras clave "desde" y "hasta", que equivalen a 0% y 100%.
0% es la hora de inicio de la animación, 100% es la hora de finalización de la animación. Para obtener la mejor compatibilidad con el navegador, siempre debemos definir selectores 0% y 100%. Aquí 0% es un cuadro, 50% es un cuadro y 100% también es un cuadro.
Finalmente, use las propiedades de la animación para controlar la apariencia de la animación y vincule la animación al selector.
nombre de animación requerido. Define el nombre de la animación.
Se requiere selector de fotogramas clave. Valores legales para el porcentaje de duración de la animación: 0-100% desde (igual que 0%) hasta (igual que 100%)
Se requieren estilos CSS. Una o más propiedades de estilo CSS legales
Por ejemplo:
@keyframesname{0%{top:0px;left:0px;fondo:rojo;}25%{top:0px;left:100px;fondo:azul;}50%{top:100px;izquierda:100px;fondo:amarillo; }75%{top:100px;left:0px;fondo:verde;}100%{top:0px;izquierda:0px;fondo:rojo;}}1. atributo de nombre de animación: establece el nombre de la animación que debe vincularse al elemento.
El atributo de nombre de animación se utiliza para vincular la animación al elemento HTML especificado. Los valores opcionales del atributo son los siguientes:
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px ;}75%{top:200px;left:0px;}100%{top:0px;left:0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;posición: relativo;nombre-animación:bola;}</style></head><body><div></div></body></html>Resultados de ejecución:
Nota: Para que la animación se reproduzca correctamente, también debe definir el atributo de duración de la animación. De lo contrario, la animación no se reproducirá porque el valor predeterminado del atributo de duración de la animación es 0.
2. atributo de duración de la animación: define cuántos segundos o milisegundos tarda la animación en completar un ciclo.
● tiempo: especifique el tiempo que tarda en completarse la animación. El valor predeterminado es 0, lo que significa que no hay efecto de animación.
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px ;}75%{top:200px;left:0px;}100%{top:0px;left:0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;posición: relativo;nombre-animación:bola;duración-animación:2s;}</style></head><body><div></div></body></html>3. función de sincronización de animación: la función matemática utilizada se llama curva de Bézier cúbica y curva de velocidad. Usando esta función, puede usar su propio valor o usar uno de los valores predefinidos.
●lineal: La velocidad de la animación es la misma de principio a fin;
●facilidad: predeterminado. La animación comienza baja, luego se acelera y se ralentiza antes de terminar;
●aceleración: la animación comienza a baja velocidad;
●ease-out: La animación finaliza a baja velocidad;
●facilidad de entrada y salida: la animación comienza y termina a baja velocidad;
●cubic-bezier (n,n,n,n): utilice la función cúbica-bezier() para definir la velocidad de reproducción de la animación. El rango de valores del parámetro es un valor entre 0 y 1.
4. atributo de retardo de animación: define cuándo comienza la animación.
●tiempo: opcional. Define el tiempo, en segundos o milisegundos, que se debe esperar antes de que comience la animación. El valor predeterminado es 0.
Nota: La unidad puede ser segundos (s) o milisegundos (ms).
5. atributo de recuento de iteraciones de animación: define cuántas veces se debe reproducir la animación.
Los valores opcionales para el atributo son los siguientes:
6. atributo de dirección de animación: define si se reproducirá la animación al revés en un bucle.
●normal: valor predeterminado. La animación se reproduce normalmente;
●reverse: la animación se reproduce al revés;
●Alternativo: La animación se reproduce hacia adelante en números impares (1, 2, 5...) y hacia atrás en números pares (2, 4, 6...);
●alternate-reverse: La animación se reproduce en dirección inversa en los momentos impares (1, 3, 5...) y en dirección directa en los momentos pares (2, 4, 6...).
7. atributo de modo de relleno de animación: especifica el estilo que se aplicará al elemento cuando la animación no se reproduce (cuando se completa la animación o cuando la animación tiene un retraso antes de comenzar a reproducirse).
Nota: De forma predeterminada, las animaciones CSS no afectan a un elemento hasta que se haya reproducido el primer fotograma clave y dejan de afectar al elemento después de que se haya completado el último fotograma clave. La propiedad Animation-fill-mode anula este comportamiento.
●ninguno valor predeterminado. : La animación no aplicará ningún estilo al elemento de destino antes y después de que se ejecute la animación;
●adelante: una vez finalizada la animación (determinada por el recuento de iteraciones de la animación), la animación aplicará este valor de atributo;
●hacia atrás: la animación aplicará los valores de propiedad definidos en el fotograma clave que inició la primera iteración de la animación durante la definición del retraso de la animación. Estos son valores en el fotograma clave desde (cuando la dirección de la animación es "normal" o "alternativa") o en el fotograma clave hasta (cuando la dirección de la animación es "inversa" o "inversa-alternativa");
●Ambas animaciones siguen las reglas de avance y retroceso. Es decir, la animación expande la propiedad de la animación en ambas direcciones.
8.animation-play-state: especifica si la animación se está ejecutando o en pausa.
●paused: Especifica pausar la animación;
●en ejecución: especifique la animación en ejecución.
9. inicial: establece la propiedad en su valor predeterminado.
●inicial: la palabra clave se utiliza para establecer las propiedades CSS en sus valores predeterminados;
●inicial: la palabra clave se puede utilizar para cualquier atributo CSS en cualquier elemento HTML.
10. heredar: heredar atributos de los elementos principales.
●heredar: palabra clave especifica que un atributo debe heredar su valor del elemento padre;
●heredar: la palabra clave se puede utilizar para cualquier atributo CSS en cualquier elemento HTML.
animación
El atributo de animación es la abreviatura de nombre de animación, duración de animación, función de sincronización de animación, retraso de animación, recuento de iteración de animación, dirección de animación, modo de relleno de animación, estado de reproducción de animación, a través de la animación. El atributo puede definir varios de los atributos anteriores al mismo tiempo. El formato de sintaxis es el siguiente:
animación:nombre-animaciónduración-animaciónfunción-sincronización-animaciónretraso-animacióncuenta-iteración-animacióndirección-animaciónmodo-relleno-animaciónestado-reproducción-animación;
Cada parámetro corresponde a cada atributo introducido anteriormente. Si se omite uno o más de los valores, se utilizará el valor predeterminado correspondiente al atributo.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Animación</title><style>.box1{ancho:700px;alto:500px;color de fondo:plata;}.box2{ancho :100px;height:100px;background-color:#bfa;margin-left:10px;/*animation-name:test;*//*animation-duration:4s;*//*animation-timing-function:linear; *//*animation-iteration-count:4;*//*animation-direction:alternate;*//*animation-fill-mode:backwards;*//*animation-delay:2s;*/animation:test2slinear1s4alternate; }/*Definir fotogramas clave de animación. El nombre del fotograma clave es prueba*/@keyframestest{/*from indica la posición inicial de la animación, que también se puede expresar en 0%. */from{margin-left:50px;background-color:orange;}/*to indica la posición final de la animación, que también se puede expresar en 100%. */to{margin-left:600px;background-color:amarillo;}}/*Controlar la ejecución de la animación*//*.box1:hover.box2{animation-play-state:paused;}*/</style > </head><body><div><div></div></div></body></html>