Tabla de contenido
En segundo lugar, el uso básico de la animación.
3. Realización de animación de nubes flotantes.
1. Definición de animación
La animación de transición es un cambio entre dos estados. La animación de cuadros puede manejar los cambios detallados en diferentes momentos durante el proceso de animación. Sin embargo, es muy fácil dejar de aprender la animación de cuadros después de comprender la animación de transición. La animación de cuadros también se puede entender como la transición entre marcos múltiples Animación de
En segundo lugar, el uso básico de la animación.
1.-animation-name especifica el nombre del fotograma clave que se vinculará al selector, indicando al sistema qué animación se debe realizar
La secuencia de animación se establece mediante @keyframes, y cada fotograma clave de la secuencia describe cómo se representa el elemento de animación en un momento específico de la secuencia de animación. Los fotogramas clave usan un porcentaje para indicar cuánto tiempo ocurren en una secuencia de animación. 0% representa el tiempo inicial de la animación, que también se puede representar con la palabra clave from. 100% significa la hora de finalización de la animación, que también se puede expresar con la palabra clave to.
@keyframes animiationName{
keyframes-selector{
css-style;
}
}2. -animation-duration La animación especifica cuántos segundos o milisegundos se tarda en completarse y le indica al sistema cuánto dura la animación.
time especifica el tiempo que tarda la animación en terminar de reproducirse. El valor predeterminado es 0, lo que significa que no hay efecto de animación.
3. -animation-timing-function Establezca cómo la animación completará un ciclo, dígale al sistema qué tan rápido se ejecutará la animación
| valor | velocidad de ejecución |
| lineal | La velocidad de la animación es la misma de principio a fin. velocidad uniforme |
| facilidad | por defecto. La animación comienza a baja velocidad, se acelera y se ralentiza antes de terminar. |
| facilidad en | La animación comienza a baja velocidad. |
| Facilitarse | La animación termina a baja velocidad. |
| facilidad de entrada y salida | La animación comienza y termina a baja velocidad. |
| cubic-bezier(n,n,n,n) | Valor propio en la función cubic-bezier. Los valores posibles son valores numéricos de 0 a 1. |
4. -animation-delay establece el intervalo de retraso antes de que comience la animación.
el tiempo es opcional Define cuánto tiempo esperar antes de que comience la animación, en segundos o milisegundos. El valor predeterminado es 0
5. -animation-iteration-count define el número de veces que se reproduce la animación. Dígale al sistema cuántas veces se debe realizar la animación
| valor | tiempos de ejecución |
| norte | Un número que define cuántas veces se debe reproducir la animación. |
| infinito | Ejecución ilimitada |
6. -animation-direction especifica si la animación debe reproducirse a la inversa.
| valor | dirección de juego |
| normal | El valor predeterminado, volver al punto de partida después de una ejecución y continuar ejecutando la próxima vez |
| alterno | Animación de ida y vuelta, retrocede y ejecuta la próxima vez después de una ejecución |
| contrarrestar | ejecución inversa |
7. -animation-fill-mode especifica el estilo que se aplicará al elemento cuando la animación no se está reproduciendo (cuando la animación está completa o cuando la animación tiene un retraso y no ha comenzado a reproducirse).
| ninguno | no hagas ningún cambio |
| hacia adelante | Deje que el estado final del elemento mantenga el estilo del último cuadro de la animación. |
| hacia atrás | Muestra el estilo del primer cuadro de la animación cuando el elemento está esperando el estado |
| ambos | Deje que el estado de espera del elemento muestre el estilo del primer cuadro de la animación y deje que el estado final del elemento mantenga el estilo del último cuadro de la animación. |
8. -animation-play-state le dice al sistema si la animación actual debe pausarse
ejecutando: ejecutando la animación
pausado: pausar la animación
9. Formato de escritura continua del módulo de animación.
animación: nombre de la animación (animation-name) duración de la animación (animation-duration) velocidad de la animación (animation-timing-function) tiempo de retraso (animation-delay) tiempos de ejecución (animation-iteration-count) animación de ida y vuelta (animation-direction) ;
3. Realización de animación de nubes flotantes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 天空轮播 晴朗 阴 晴 */
* {
margin: 0;
padding: 0;
}
.parent {
/* vh viewHeight 视口区域高度 vw viewWidth 视口区域宽度 */
height: 100vh;
background-color: skyblue;
animation: sky 10s linear infinite;
}
/* 定义一个天空动画 */
@keyframes sky {
0% {
background-color: skyblue;
}
50% {
background-color: #000;
}
100% {
background-color: skyblue;
}
}
.cloud_one {
width: 300%;
height: 600px;
margin: 30px auto;
background: url(https://i.hd-r.cn/04462965ba09f768e47b6ea8cb065b1c.png) repeat-x;
position: fixed;
left: 0;
top: 0;
animation: cloud 20s linear infinite;
}
.cloud_two {
width: 300%;
height: 600px;
margin: 30px auto;
background: url(https://s3.bmp.ovh/imgs/2023/06/10/dc7235f6f0a978b5.png) repeat-x;
position: fixed;
left: 0;
top: 0;
animation: cloud 40s linear infinite;
}
.cloud_three {
width: 300%;
height: 600px;
margin: 30px auto;
background: url(https://s3.bmp.ovh/imgs/2023/06/10/8201e7f468f3570c.png) repeat-x;
position: fixed;
left: 0;
top: 0;
animation: cloud 60s linear infinite;
}
@keyframes cloud {
from {
left: 0;
}
to {
left: -200%;
}
}
</style>
</head>
<body>
<div class="parent">
<div class="cloud_one"></div>
<div class="cloud_two"></div>
<div class="cloud_three"></div>
</div>
</body>
</html>
La imagen se convirtió en una dirección en línea y puede copiarla y usarla directamente.
