Introduction détaillée à l'attribut animation-direction en CSS3-tutoriel CSS-php.cn

Introduction détaillée à l'attribut animation-direction en CSS3

零下一度

Libérer： 2017-05-18 14:34:43

original

2855 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

[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!