Maison > Article > interface Web > Introduction détaillée à l'attribut animation-direction en CSS3
Introduction détaillée à l'attribut animation-direction en CSS3
- 零下一度original
- 2017-05-18 14:34:432769parcourir
Propriété CSS3 animation-direction, exemple de manuel de référence CSS Exécutez l'animation une fois, puis exécutez l'animation en sens inverse. Récupérez ou définissez si l'animation de l'objet se déplace dans le sens inverse dans l'instance de boucle
Exécutez d'abord l'animation une fois, puis exécutez l'animation en sens inverse :
!DOCTYPE html> <html> <head> <style>
p { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s infinite; animation-direction:alternate;
/* Safari 和 Chrome */ -webkit-animation:myfirst 5s infinite; -webkit-animation-direction:alternate; }
@keyframes myfirst { 0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;} }
@-webkit-keyframes myfirst /* Safari 和 Chrome */ { 0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }
</style> </head> <body> <p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-direction 属性。</p> <p></p> </body> </html>Prise en charge des navigateurs
Internet Explorer 10, Firefox et Opera prennent en charge l'attribut animation-direction.
Safari et Chrome prennent en charge une propriété alternative, la propriété -webkit-animation-direction.
Remarque : Internet Explorer 9 et les versions antérieures ne prennent pas en charge la propriété animation-direction.
Définition et utilisation
L'attribut animation-direction définit s'il faut boucler et alterner les animations en sens inverse.
Remarque : Cette propriété n'aura aucun effet si l'animation est configurée pour être jouée une seule fois.
Syntaxe CSS
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inhe
[Recommandations associées]
1 Partagez un exemple de surveillance d'un événement de fin d'animation CSS3.
2. Les 8 propriétés de l'animation CSS3 (Animation) qu'il faut maîtriser
4. Explication détaillée des deux méthodes de pause (transition, animation) en CSS3
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!