Les animations

Animation

@keyframes

    
        
        /* Lorsque vous spécifiez des styles CSS dans la @keyframes règle, l'animation passera progressivement du style actuel au nouveau style à certains moments. */
        @keyframes exemple {
            from {background-color: red;}
            to {background-color: yellow;}
        }

        /* L'élément auquel appliquer l'animation */
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            animation-name: example;
            animation-duration: 4s;
        }
        
    

Animation-name

    
        
        /* La animation-namepropriété spécifie un nom pour l'animation @keyframes . */
        div {
            animation-name: none | solide | bounce;
        }
        
    

Animation-duration

    
        
        /* La animation-duration propriété définit la durée d'exécution d'une animation. */
        div {
            /* Animation unique */
            animation-duration: 6s | 120ms;

            /* Plusieurs animations */
            animation-duration: 1.5s , 2.22s;
        }
        
    

Animation-delay

    
        
        /* La animation-delay propriété spécifie un délai pour le démarrage d'une animation. */
        div {
            /* Animation unique */
            animation-delay: 6s | 0s | -150ms;

            /* Plusieurs animations */
            animation-delay: 1.5s , 250mss;
        }
        
    

Animation-interation-count

    
        
        /* La animation-iteration-count propriété spécifie le nombre de fois qu'une animation doit s'exécuter. */
        div {
            animation-delay: 0 | 2 | 1.5;
        }
        
    

Animation-direction

    
        
        /* La animation-direction propriété spécifie si une animation doit être lue en avant, en arrière ou en cycles alternés. */
        div {
            animation-direction: normal | reverse | alternate | alternate-reverse;
        }
        
    

Animation-timing-function

    
        
        /* La animation-timing-function propriété spécifie la courbe de vitesse de l'animation. */
        div {
            animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out;
        }
        
    

Animation-fill-mode

    
        
        /* La animation-fill-mode propriété spécifie un style pour l'élément cible lorsque l'animation n'est pas en cours de lecture (avant qu'elle ne démarre, après qu'elle se termine ou les deux). */
        div {
            animation-fill-mode: none | forwards | backwards | both ;
        }
        
    

Animation

    
        
        /* Le même effet d'animation que ci-dessus peut être obtenu en utilisant la animation propriété abrégée : */
        div {
            animation: exqmple 5s linear 2s infinite alternate ;
        }