La regla @keyframes en CSS se usa para especificar la regla de animación. Se crea una animación utilizando estilos CSS modificables. Durante la animación, la propiedad CSS puede cambiar muchas veces.
Necesitamos especificar cuando hay un cambio de estilo que ocurre en porcentaje, o contiene las palabras clave «desde» y «hasta», que es lo mismo que 0% y 100% donde 0% representa el comienzo de la animación y 100 % representa la finalización de la animación. Podemos controlar la apariencia de la animación usando las propiedades de la animación y es posible vincular la animación a los selectores. El fotograma clave ignora la regla importante en CSS.
Nota: Para obtener la mejor compatibilidad con el navegador, especifique siempre los selectores 0% y 100%.
Sintaxis:
@keyframes animation-name {keyframes-selector {css-styles;}}
Valor de la propiedad: este parámetro acepta tres valores que se mencionan anteriormente y se describen a continuación:
- animation-name : se requiere el animation-name y define el nombre de la animación.
- keyframes-selector: El keyframes-selector define el porcentaje de la animación. Se encuentra entre 0% y 100%. Una animación puede contener muchos selectores.
- css-styles: css-styles define una o más propiedades de estilo CSS legales o aplicables.
Ejemplo 1: este ejemplo describe el uso de la regla @keyframe para agregar la animación al elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-align: center;
}
div {
background: green;
position: relative;
animation: gfg 10s infinite;
}
/* keyframe CSS style */
@keyframes gfg {
0% {
top: 0px;
width: 00px;
}
25% {
top: 50px;
background: LawnGreen;
width: 50px;
}
50% {
top: 100px;
background: LightGreen;
width: 100px;
}
75% {
top: 150px;
background: MediumSeaGreen;
width: 150px;
}
100% {
top: 200px;
color: white;
background: Green;
width: 200px;
}
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo describe el uso de la regla @keyframe usando la regla !importante en CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-align: center;
}
div {
background: green;
position: relative;
animation: gfg 7s infinite;
}
@keyframes gfg {
0% {
top: 0px;
width: 0px;
}
25% {
top: 50px !important;
background: LawnGreen;
}
50% {
top: 100px !important;
background: LightGreen;
}
100% {
top: 200px !important;
color: white;
background: Green;
width: 210px;
}
}
</style>
</head>
<body>
<center>
<div>
<h1>GeeksforGeeks</h1>
</div>
</center>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la regla @keyframes se enumeran a continuación:
- Google Chrome 43.0, 4.0 -webkit-
- Microsoft Edge 10.0
- Firefox 16.0, 5.0 -moz-
- Safari 9.0, 4.0 -webkit-
- Opera 30.0, 15.0 -webkit-, 12.0 -o-
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA