Maison >interface Web >tutoriel CSS >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:432831parcourir

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

3 Utiliser l'attribut animation pour implémenter des exemples d'exécution différée entre boucles Tutoriel.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn