La animación es una forma mediante la cual podemos crear la ilusión de movimiento colocando imágenes fijas una tras otra en un formato típico. Por ejemplo, podemos hacer que una pelota se eleve en algún instante en lugar de caer como un efecto de animación. CSS nos proporciona algunas propiedades para controlar el efecto de animación cambiando algunas de sus variables como el tiempo y los fotogramas clave, etc.
Algunas propiedades de CSS son las siguientes:
- animation-name : especifica el nombre de la animación que se utilizará.
- animation-iteration-count : Indica el número de ciclos que la animación debe estar en efecto.
- animation-direction : especifica la dirección en la que se debe reproducir la animación.
- animation-delay : el período de tiempo después del cual debe comenzar la animación.
- animation-duration : Menciona el tiempo de duración durante el cual continúa la animación.
Junto con todos estos métodos, también existen otros métodos, como: función de temporización de animación, @fotogramas clave, modo de relleno de animación, etc.
Explicación: Básicamente, en nuestro código CSS primero tenemos que especificar el efecto principal que debería mostrar nuestra animación usando la propiedad «@keyframes» . Luego, dentro de este bloque, tenemos que escribir el efecto de la animación, es decir, el cambio de tamaño, de qué color debe ocurrir el cambio de color, el cambio de opacidad y muchos más. Todos estos se pueden mencionar en términos de porcentaje del intervalo de tiempo total o usando las palabras clave «desde» y «hasta». Por lo tanto, este bloque contiene el código de animación principal que se mostrará.
A continuación se muestran ejemplos de creación de animaciones. La primera animación da como resultado un cambio de opacidad y la segunda da como resultado un cambio de color de fondo.
-
Ejemplo 1:
CSS
@keyframes animation_example1{/* animation results in change of opacity*/from{opacity:0.3;}to{opacity:1;}} -
Ejemplo 2: En este código creamos animaciones pero para vincular el efecto de estas animaciones a las etiquetas HTML (tal vez img u otras) tenemos que especificar su nombre en el estilo CSS de esa etiqueta.
CSS
@keyframes animation_example2{/* here the amount of total time is divided */0%{height:220px;width:220px;opacity:0.7;}50%{height:240px;width:240px;opacity:0.4;}} -
Ejemplo 3: en este código, podemos mencionar los detalles de la animación, como el tiempo y el período de retraso, y también los recuentos de iteraciones, etc.
CSS
#pic1{animation-name:animation_example2;animation-duration:2s;animation-delay:0.5s;animation-iteration-count:infinite;}/* This animation will continueinfinite number of times */
A continuación se muestra el código HTML completo para el que se aplicará el CSS mencionado anteriormente para producir los resultados.
HTML
<html>
<head>
<style>
@keyframes animation_example2{
/* here the amount of total time is divided */
0%{
opacity:1;}
50%{
opacity:0.1;}
}
/* This animation will continue
infinite number of times */
#gfg{
animation-name: animation_example2;
animation-duration:2s;
animation-delay:0.5s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div id="gfg"
style="width:250px;height:100px;
border:1px solid #000;
background-color:blue">
</div>
</body>
</html>
Producción:
producción
Publicación traducida automáticamente
Artículo escrito por harshkumarchoudhary144 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA