propiedad CSS3animation detallada (c)
animación-dirección
propiedad de animación dirección
Animación de objetos recuperados o si el movimiento inverso en el bucle
gramática
animación dirección: Largo | revertir | alterna | alternos inversa | inicial | heredar;
Descripción del parámetro
normal: normal de dirección
inversa: ejecutar opuesto
alternativo: ejecutar la primera operación y luego en la dirección opuesta, y ejecutar alternando continuamente
alterno-inverso: carrera primero en la dirección inversa y a continuación, ejecutar la dirección positiva, y se están ejecutando alternativamente continuamente
animación-fill-mode
propiedades-fill-modo de animación
Cuando las disposiciones de la animación no se reproduce (cuando la animación se ha completado o no hay un retraso cuando el juego comienza la animación), que se aplicará a los elementos del estilo
gramática
animación-fill-mode: ninguno | hacia delante | al revés | tanto | inicial | heredar;
Descripción del parámetro
Ninguno: por defecto. No ajuste más allá del estado animación de objetos
hacia delante: el estado del objeto Conjunto de estado al final de la animación
al revés: el estado de estado del objeto se establece en la animación se inicia
tanto: Establece el estado de un objeto a otro, o el principio del fin
animación-play-Estado
animación-play-estado de propiedad
Especifica si la animación está en marcha o parado
gramática
animación-play-Estado: pausa | corriendo;
Descripción del parámetro
En pausa: Especifica que se debe hacer una pausa en la animación
en ejecución: el valor por defecto, especificar una animación en ejecución
animación
las propiedades de animación
propiedades de material compuesto. Cuando la solicitud para recuperar o ajustar los efectos de animación de objetos
gramática
animación: nombre de la duración de tiempo de retardo función de iteración recuento de llenado de modo de dirección de reproducción por el estado;
programación de Ejercicios
En general, podemos ver alguna página web de desplazamiento tiene una flecha de desplazamiento consejos efectos de animación, como por ejemplo cuando abrimos la página de una web cuando la parte inferior de la página habrá una flecha hacia abajo para avanzar y retroceder a recordarnos pantalla declive. Así que tenemos que probarlo.
tarea
- Crear un div CSS, su uso para controlar el tamaño, la fuente, el tipo de ">" defraudado y se volvió 90º, la posición del centro de control para la parte inferior de la página
- Crear fotogramas clave de animación movimiento descendente
- Animar un bucle infinito, y antes del inicio de las .5s retardo de animación
Task Tips
Iteración-Count-Animación: Infinito | <Número>;
<Número> es el número cuyo valor por defecto es "1"; infinito número infinito de ciclos.
Animación dirección: Largo | Reverse | alternativo | Alternate-inversa;
normal: dirección normal;
inverso: sentido de giro inverso;
alternativo: primero a correr de nuevo en la dirección opuesta a la carrera, y continuó para funcionar alternativamente;
Alternate-inversa: Para invertir la dirección de ejecución de nuevo positivo la dirección de la corriente, y continuar la operación alterna.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3animation属性详解（三）</title>
<style type="text/css">
div{
font-family: arial;
font-size: 72px;
font-weight: bold;
position: fixed;
right: 0;
left: 0;
bottom: 20px;
width: 30px;
height: 30px;
margin: auto;
transform: rotate(90deg);
animation: gt 1s linear .5s infinite alternate;
}
@keyframes gt{
from{bottom: 20px;}
to{bottom: 50px;}
}
</style>
</head>
<body>
<div>></div>
</body>
</html>
