< 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);
    }
}