Evaluation

Une bannière à reproduire.

Mon code:

Le code du prof:

Le: animation-fill-mode: both;  sert ici au fait que les billes étant placé à gauche (dans l’exemple du prof), les billes ne seront pas vues a gauche au démarrage.

Nous pouvons faire repartir les billes, au survol, en ajoutant au code:

@keyframes billes-retour {
            from {
                opacity:1;
                transform: translate(0,0) rotate(0);
            }
            to {
                opacity:0;
                transform: translate(960px,0) rotate(2750deg);
            }
        }
        .banniere:hover{
            animation: banniere-retour 2s ease 0s;
            animation-fill-mode: both;
        }
        @keyframes banniere-retour {
            from {
                background-color: #ddd;
            }
            to {
                background-color: rgb(0, 0, 0);
            }
        }
        .banniere:hover .slogan-site{
            animation: variation-opacite 2s 5s;
            animation-fill-mode:both; 
        }
        @keyframes variation-opacite {
            from {
                opacity:0;
            }
            to {
                opacity:1;
            }
        }