 |
Animaciones (definición de más de 2 keyframes)
La regla @keyframes especifica el código de animación. La animación se crea cambiando gradualmente de un conjunto de estilos CSS a otro. Durante la animación, puede cambiar el conjunto de estilos CSS muchas veces. Especifique cuándo ocurrirá el cambio de estilo en porcentaje, o con las palabras clave "desde" y "hasta", que es lo mismo que 0% y 100%. 0% es el comienzo de la animación, 100% es cuando la animación está completa.
La especificación define que si un keyframe se define varias veces, pero no todas las propiedades afectadas se especifican en cada keyframe, sólo los valores especificados en el último keyframe se consideran. Por ejemplo:
Sugerencia: Para obtener la mejor compatibilidad con el navegador, siempre debe definir los selectores 0% y 100%.
Nota: Utilice las propiedades de la animación para controlar la apariencia de la animación y también para vincular la animación a los selectores.
<html>
<head>
<style>
.op1 {
width: 150px;
height: 150px;
background: red;
position: relative;
animation: mymove1 5s infinite;
}
@keyframes mymove1 {
0% { background: red; top: 0px; left: 0px; background: red;}
25% { top: 0px; left: 200px background: blue;}
50% {top: 200px; left: 200px; background: yellow;}
75% {top: 200px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
</style>
</head>
<body>
<div class="op1"></div>
</body>
</html>