Maison >interface Web >tutoriel CSS >Tutoriel sur l'utilisation de l'attribut d'animation pour implémenter une exécution différée entre les boucles
Tutoriel sur l'utilisation de l'attribut d'animation pour implémenter une exécution différée entre les boucles
- 零下一度original
- 2017-05-18 14:37:383458parcourir
Présentez d'abord la définition et l'utilisation de l'animation
L'attribut d'animation est un attribut abrégé, utilisé pour définir six attributs d'animation :
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-directionValeur par défaut : aucun 0 facilité 0 1 normal
Remarque : Veuillez toujours spécifier l'attribut animation-duration, sinon la durée sera de 0 et l'animation ne sera pas jouée.
Syntaxe
animation: name duration timing-function delay iteration-count direction;
animation-name spécifie le nom de l'image clé qui doit être lié au sélecteur. .
animation-duration Spécifie le temps nécessaire pour terminer l'animation, en secondes ou millisecondes.
animation-timing-function spécifie la courbe de vitesse de l'animation.
animation-delay Spécifie le délai avant le démarrage de l'animation.
animation-iteration-count Spécifie le nombre de fois que l'animation doit être jouée. (Valeur : n fois, boucle infinie)
animation-direction Spécifie si l'animation doit être jouée à l'envers à tour de rôle.
Résumé :
Sur la base des attributs ci-dessus, il vous suffit de définir le délai d'animation et le nombre d'itérations d'animation en fonction de la situation spécifique.
Par exemple :
p
{
animation:mymove 5s 5s infinite;
-webkit-animation:mymove 5s 5s infinite; /* Safari 和 Chrome */
} Exemple de solution :
<!doctype html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.item1{
list-style: none;
-webkit-animation: revolving 4s 0s infinite;
animation: revolving 4s 0s infinite;
}
@-webkit-keyframes revolving{
0,75%{
-webkit-transform: perspective(700px) rotateX(90deg);
}
87.5%{
-webkit-transform: perspective(700px) rotateX(0deg);
}
100%{
-webkit-transform: perspective(700px) rotateX(-90deg);
}
}
</style>
</head>
<body>
<ul>
<li class="item1">梅西与美洲杯失之交臂</li>
</ul>
</body>
</html>Définissez l'animation totale sur 4 secondes, puis les premiers 75 % sont de 3 secondes . Changement (0-75 %), les 25 % suivants ne durent qu'une seconde à animer.
[Recommandations associées]
1. Introduction détaillée à la propriété animation-direction en CSS3
2. Doit maîtriser l'animation CSS3 ( Animation ) : les 8 attributs majeurs
3 Partagez un exemple de surveillance de l'événement de fin d'animation CSS3 (animation)
4.Détaillé. explication de deux types de pauses en méthode CSS3 (transition, animation)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!