Direction des animations CSS3
Explication détaillée de l'attribut animation-direction de CSS3 :
Cet attribut est utilisé pour définir si l'animation d'animation peut se déplacer en sens inverse.
Pour plus d'informations sur l'attribut animation, veuillez vous référer à l'explication détaillée de l'utilisation de l'attribut animation en CSS3.
Structure grammaticale :
animation-direction：normal | alternate [ , normal | alternate ]*
Analyse des paramètres :
1.normal : L'animation s'exécute dans le sens normal.
2.alternate : Alterner entre la direction normale et la direction inverse.
Remarque spéciale :
Si plusieurs valeurs d'attribut sont fournies, séparez-les par des virgules.
La fonctionnalité de script correspondante est animationDirection.
Exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation 5s infinite;
-webkit-animation:theanimation 5s infinite;
-moz-animation:theanimation 5s infinite;
-o-animation:theanimation 5s infinite;
-ms-animation:theanimation 5s infinite;
animation-direction:alternate;
-webkit-animation-direction:alternate;
-moz-animation-direction:alternate;
-o-animation-direction:alternate;
-ms-animation-direction:alternate;
}
@keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-webkit-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-moz-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-o-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-ms-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Le code ci-dessus peut définir l'animation pour qu'elle se déplace alternativement dans le sens normal et dans le sens inverse.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:firstanimation 5s infinite,secondanimation 2s infinite;
-webkit-animation:firstanimation 5s infinite,secondanimation 2s infinite;
-moz-animation:firstanimation 5s infinite,secondanimation 2s infinite;
-o-animation:firstanimation 5s infinite,secondanimation 2s infinite;
-ms-animation:firstanimation 5s infinite,secondanimation 2s infinite;
animation-direction:alternate,normal;
-webkit-animation-direction:alternate,normal;
-moz-animation-direction:alternate,normal;
-o-animation-direction:alternate,normal;
-ms-animation-direction:alternate,normal;
}
@keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-webkit-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-moz-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-o-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-ms-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-webkit-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-moz-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-o-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-ms-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Le code ci-dessus peut configurer deux animations respectivement. L'une peut s'exécuter alternativement dans deux directions et l'autre ne peut s'exécuter que dans la direction normale.
nouveau fichier
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:firstanimation 5s infinite,secondanimation 2s infinite;
-webkit-animation:firstanimation 5s infinite,secondanimation 2s infinite;
-moz-animation:firstanimation 5s infinite,secondanimation 2s infinite;
-o-animation:firstanimation 5s infinite,secondanimation 2s infinite;
-ms-animation:firstanimation 5s infinite,secondanimation 2s infinite;
animation-direction:alternate,normal;
-webkit-animation-direction:alternate,normal;
-moz-animation-direction:alternate,normal;
-o-animation-direction:alternate,normal;
-ms-animation-direction:alternate,normal;
}
@keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-webkit-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-moz-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-o-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-ms-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-webkit-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-moz-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-o-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-ms-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Aperçu
Clear
- Recommandations de cours
- Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~
Les étudiants qui ont regardé ce cours apprennent également
Parlons brièvement de la création d'une entreprise en PHP
Introduction rapide au développement web front-end
Développement pratique à grande échelle par Tianlongbabu du cadre MVC version Mini imitant le site Web de l'encyclopédie des choses embarrassantes
Premiers pas avec le développement pratique PHP : création rapide de PHP [Small Business Forum]
Vérification de connexion et forum de discussion classique
Collecte de connaissances sur les réseaux informatiques
Démarrage rapide de la version complète de Node.JS
Le cours front-end qui vous comprend le mieux : HTML5/CSS3/ES6/NPM/Vue/...[Original]
Écrivez votre propre framework PHP MVC (40 chapitres en profondeur/gros détails/à lire absolument pour que les débutants progressent)