Aujourd'hui, je veux utiliser css3 pour obtenir l'effet de secousse d'élément à gauche et à droite, regardez d'abord la description des propriétés d'animation en css3:
- Règles @keyframes CSS3
Pour créer des animations dans CSS3, vous devez apprendre les règles @keyframes.
La règle @keyframes est utilisée pour créer des animations. En spécifiant un certain style CSS dans @keyframes, vous pouvez créer un effet d'animation qui passe progressivement du style actuel au nouveau style.
Internet Explorer 10, Firefox et Opera prennent en charge les règles @keyframes et les attributs d'animation.
Chrome et Safari ont besoin du préfixe -webkit- @ keyframes.
Exemple
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
L'animation est l'effet de changer progressivement les éléments d'un style à un autre.
Vous pouvez modifier autant de styles que vous le souhaitez.
Veuillez utiliser un pourcentage pour spécifier l'heure à laquelle le changement se produit, ou utilisez les mots-clés «de» et «à», qui sont équivalents à 0% et 100%.
0% est le début de l'animation et 100% est la fin de l'animation.
Afin d'obtenir la meilleure prise en charge du navigateur, vous devez toujours définir des sélecteurs 0% et 100%.
Exemple
Modifiez la couleur d'arrière-plan lorsque l'animation est à 25% et 50%, puis modifiez-la à nouveau lorsque l'animation est terminée à 100%:
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
Exemple de propriété d'animation CSS3
Exécutez l'animation nommée myfirst avec toutes les propriétés d'animation définies:
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
Ce qui précède est configuré selon les propriétés standard de l'animation, et peut également être écrit sous forme abrégée:
L'exemple
est le même que l'animation ci-dessus, mais utilise la propriété d'animation abrégée:
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}
Entrons dans le sujet principal ci-dessous. Expliquez comment faire trembler l'élément à gauche et à droite:
définissez d'abord @keyframes et les propriétés d'animation de l'élément
<style>
.weui-badge{
display:inline-block;
padding:.15em .4em;
min-width:8px;
border-radius:18px;
background-color:#F43530;
color:#FFFFFF;
line-height:1.2;
text-align:center;
font-size:12px;
vertical-align:middle;
animation:move 3s 0s infinite;-webkit-animation:move 3s 0s infinite;
transform-origin:bottom;-webkit-transform-origin:bottom;
}
@keyframes move
{
0%, 65%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
70% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
75% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
80% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
85% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
90% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
95% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
100% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
}
@-webkit-keyframes move
{
0%, 65%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
70% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
75% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
80% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
85% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
90% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
95% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
100% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
}
</style>
L'analyse du code peut être vue. En définissant la règle @keyframes, l'élément n'aura aucune action à 0% -65%, c'est-à-dire pas d'angle de rotation, à partir de 70% -100% et basculera
à 6 degrés. Définissez l'animation dans le weui-badge-like style comme suit:
animation:move 3s 0s infinite;-webkit-animation:move 3s 0s infinite;
transform-origin:bottom;
-webkit-transform-origin:bottom;
Autrement dit, à l'aide de la règle @keyframes, définissez l'animation pour terminer une action de cycle sur 3s, définissez l'animation pour qu'elle commence à 0s et spécifiez que l'animation doit être lue à l'infini (infini).
Définir l'origine de la transformation: bas pour définir le point de base de rotation de l'élément comme point central inférieur. La valeur par défaut est le point central de l'élément.