Maison >interface Web >tutoriel CSS >L'animation CSS3 implémente l'introduction d'un exemple d'effet d'animation image par image
L'animation CSS3 implémente l'introduction d'un exemple d'effet d'animation image par image
- 高洛峰original
- 2017-03-09 17:11:001577parcourir
Cet article présente principalement l'animation CSS3 pour obtenir des exemples d'effets d'animation image par image. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer
L'attribut d'animation en CSS3 est très puissant, mais vous je. je l'utilise rarement, et on m'a récemment posé une question à ce sujet dans une interview. Je ferai un bref résumé de l'animation pendant que j'ai le temps maintenant. Parallèlement, une démo d'animation image par image est implémentée sous forme d'exercice
Liste des attributs d'animation
Parce qu'il existe de nombreux attributs d'animation, il est un peu pénible de le voir dans w3c, alors je viens de le faire Une carte, vous pouvez la voir d'un coup d'œil si vous souhaitez la vérifier plus tard
. Utiliser l'animation pour réaliser une animation image par image
Se familiariser avec les propriétés de l'animation Après cela, je dois trouver un petit projet simple à mettre en œuvre, c'est tellement intéressant. Lançons-en un d'abord pour me satisfaire
L'idée est très simple, c'est de donner à l'élément un arrière-plan de sprite, puis d'ajouter l'animation du cadre pour changer la position de l'arrière-plan :
@keyframes run{
from{
background-position: 0 0;
}
to{
background-position: -1540px 0 ;
}
}
p{
width:140px;
height:140px;
background: url(run.png) ;
animation-name：run;
animation-duration:1s;
animation-iteration-count:infinite;
}
Il s'avère que l'animation passe en mode facilité par défaut, qui insère une animation d'interpolation entre chaque image clé, donc l'effet d'animation est cohérent
C'est facile à résoudre si vous connaissez la raison :
@keyframes run{
0%, 8%{ /*动作一*/ }
9.2%, 17.2%{ /*动作二*/ }
...
}étape 1 : Restez 8 images entre les actions, définissez l'action 1 à 0 %, terminez l'action 1 à 8 %<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3逐帧动画</title>
<style>
@keyframes run{
0%, 8%{ background-position: 0 0; }
9.2%, 17.2%{ background-position: -140px 0; }
18.4%, 26.4%{ background-position: -280px 0 ; }
27.6%, 35.6%{ background-position: -420px 0 ; }
36.8%, 44.8%{ background-position: -560px 0 ; }
46%, 54%{ background-position: -700px 0 ; }
55.2%, 63.2%{ background-position: -840px 0 ; }
64.4%, 72.4%{ background-position: -980px 0 ; }
73.6%, 81.6%{ background-position: -1120px 0 ; }
82.8%, 90.8%{ background-position: -1400px 0 ; }
92%, 100%{ background-position: -1540px 0 ; }
}
@-webkit-keyframes run{
0%, 8%{ background-position: 0 0; }
9.2%, 17.2%{ background-position: -140px 0; }
18.4%, 26.4%{ background-position: -280px 0 ; }
27.6%, 35.6%{ background-position: -420px 0 ; }
36.8%, 44.8%{ background-position: -560px 0 ; }
46%, 54%{ background-position: -700px 0 ; }
55.2%, 63.2%{ background-position: -840px 0 ; }
64.4%, 72.4%{ background-position: -980px 0 ; }
73.6%, 81.6%{ background-position: -1120px 0 ; }
82.8%, 90.8%{ background-position: -1400px 0 ; }
92%, 100%{ background-position: -1540px 0 ; }
}
p{
width:140px;
height:140px;
background: url(blog/754767/201606/754767-20160601000042992-1734972084.png) ;
animation:run 1s infinite;
-webkit-animation:run 1s infinite;
animation-fill-mode : backwards;
-webkit-animation-fill-mode : backwards;
}
</style>
</head>
<body>
<p></p>
</body>
</html>Il existe une autre méthode de mise en œuvre, qui consiste à utiliser les étapes ( ), c'est-à-dire une animation Step entre les images, ce n'est pas écrit en w3c, postez d'abord une photo
steps(1,end) : Conserver le style 0% jusqu'à la fin de cette image (pas le cycle entier)
L'effet de démarrage par étapes est équivalent à steps(1,start) , et l'effet step-end est équivalent à steps(1,end)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3逐帧动画</title>
<style>
@keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
@-webkit-keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
p{
width:140px;
height:140px;
background: url(754767/201606/754767-20160601000042992-1734972084.png) ;
animation:run 1s steps(1, start) infinite;
-webkit-animation:run 1s steps(1, start) infinite;
}
</style>
</head>
<body>
<p></p>
</body>
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!