Regla @keyframes de CSS
La regla at @keyframes es la base de las animaciones con fotogramas clave utilizadas para animar (cambiar gradualmente de un estilo a otro) muchas propiedades CSS. Esta regla permite especificar qué debe ocurrir en momentos específicos durante la animación definiendo estilos para los fotogramas clave (o puntos de referencia) a lo largo de la secuencia de la animación.
La regla @keyframes es una parte fundamental de la especificación CSS Animations.
La regla @keyframes y su identificador van seguidos de conjuntos de reglas (es decir, reglas de estilo con selectores y bloques de declaración, como en el código CSS normal) delimitados por llaves.
Fotogramas clave en la secuencia de animación
Dentro de las llaves, los selectores de fotogramas clave definen cuándo deben cambiar los estilos durante la secuencia de animación. El conjunto de estilos CSS puede actualizarse varias veces a lo largo de la animación.
Selector de fotograma clave
El bloque de declaración del fotograma clave incluye propiedades CSS y sus valores. Un selector de fotograma clave puede usar un porcentaje (%) o las palabras clave from (equivalente a 0%) y to (equivalente a 100%). 0% marca el inicio de la animación y 100% marca el final.
Prefijos de proveedor
La regla @keyframes es totalmente compatible con todos los navegadores modernos sin necesidad de prefijos de proveedor. Los prefijos heredados (como -webkit- o -moz-) ya no son necesarios.
Sintaxis
Sintaxis de la regla at CSS @keyframes
@keyframes animationname {keyframes-selector {css-styles;}}Uso de @keyframes como palabra clave
La regla @keyframes consta de la palabra clave @keyframes seguida de un identificador (elegido por el desarrollador) que define la animación. Para vincular la animación a un elemento, este identificador se utiliza como valor para la animation-name propiedad.
Así es como se ve:
Cómo definir una animación y aplicarla a un elemento
/* define the animation */
@keyframes your-animation-name {
/* style rules */
}
/* apply it to an element */
.element {
animation-name: your-animation-name;
/* OR using the animation shorthand property */
animation: your-animation-name 1s …;
}Ejemplo de la regla @keyframes con la propiedad background-color:
Ejemplo de la regla at CSS @keyframes
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
padding: 50px;
animation: backgrounds 4s infinite;
}
@keyframes backgrounds {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #cccccc;
}
}
</style>
</head>
<body>
<h2>@keyframes example</h2>
<div class="element">The background of this text is animated.</div>
</body>
</html>En este ejemplo, animamos la propiedad background-color. Primero, establecemos un identificador para la animación: backgrounds. Luego, configuramos los selectores de fotogramas clave (0%, 50% y 100%) y definimos valores para la propiedad: verde, azul y gris. Esto significa que en el punto de inicio (0%), el color de fondo será verde claro hasta que llegue al siguiente fotograma clave (50%). En el medio de la secuencia de animación, el fondo se volverá azul claro y, en el punto final (100%), será gris.
Ejemplo de la regla @keyframes:
Ejemplo de la regla at CSS @keyframes con valor infinito
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 10px;
height: 100px;
background: red;
border-radius: 50%;
position: relative;
animation: element 4s infinite;
}
@keyframes element {
0% {
top: 0px;
background: #1c87c9;
width: 100px;
}
100% {
top: 200px;
background: #8ebf42;
width: 150px;
}
}
</style>
</head>
<body>
<h2>@keyframes rule example</h2>
<div></div>
</body>
</html>Ejemplo de uso de la regla @keyframes para crear una imagen que cae:
Ejemplo de la regla at CSS @keyframes con la propiedad transform
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html,
body {
height: 90%;
}
.container {
margin: 30px auto;
min-width: 320px;
max-width: 600px;
height: 90%;
overflow: hidden;
}
img {
transform-origin: left center;
animation: fall 5s infinite;
}
@keyframes fall {
from {
transform: rotate(0) translateX(0);
opacity: 1;
}
to {
transform: rotate(90deg) translateX(200px);
opacity: 0.1;
}
}
</style>
</head>
<body>
<h2>@keyframes example</h2>
<div class="container">
<img src="https://es.w3docs.com/build/images/w3docs-logo-black.png" alt="W3docs" width="150" height="50" />
</div>
</body>
</html>Componentes de la sintaxis
| Componente | Descripción |
|---|---|
identifier | Especifica el nombre de la animación. Obligatorio. |
keyframe-selector | Especifica el porcentaje de la duración de la animación. Acepta 0% a 100%, from (0%) o to (100%). Obligatorio. |
declaration-block | Contiene las propiedades y valores CSS que se aplicarán en cada fotograma clave. Obligatorio. |
Practice
¿Qué es correcto sobre los keyframes en CSS?