< Retour
Syntaxe basique
.animate {
-webkit-animation: zoom 1s ease-in-out infinite;
animation: zoom 1s ease-in-out infinite;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes zoom {
0%, 100% {
-webkit-transform: scale(.5);
transform: scale(.5);
}
50% {
-webkit-transform: scale(2);
transform: scale(2);
}
}
@keyframes zoom {
0%, 100% {
-webkit-transform: scale(.5);
transform: scale(.5);
}
50% {
-webkit-transform: scale(2);
transform: scale(2);
}
}
Syntaxe complète
.animate {
-webkit-animation-name: zoom;
animation-name: zoom;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes zoom {
0%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(2);
transform: scale(2);
}
}
@keyframes zoom {
0%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(2);
transform: scale(2);
}
}