Comment utiliser l'attribut animation-name pour appeler une animation ? guide d'utilisation des animations CSS

Dans les styles CSS, avant de pouvoir utiliser des animations, nous devons utiliser @keyframes pour définir des animations. Cependant, les animations définies à l'aide d'images clés ne sont pas très bonnes à exécuter. Nous avons vraiment besoin de l'attribut animation-name pour obtenir l'effet d'animation. donc dans Dans les styles CSS, comment utilisons-nous l'attribut animation-name pour l'implémenter ? Résumons comment utiliser l'attribut animation-name pour appeler des animations ? Une liste complète de l'utilisation des animations CSS.

Avant d'implémenter l'effet d'animation, nous devons d'abord comprendre l'attribut animation-name :

syntaxe de l'attribut animation-name : animation -name : nom de l'animation ;

Remarque : lors de l'utilisation de l'attribut animation-name pour définir un dialogue, nous devons utiliser des images clés pour nommer le même nom. La prémisse doit être sensible à la casse. cela peut ne pas avoir d'effet, pour la compatibilité des autres navigateurs, on peut ajouter un préfixe webkit devant.

Le code est le suivant :

<style type="text/css">
        @-webkit-keyframes mycolor
        {
            0%{background-color:red;}
            30%{background-color:blue;}
            60%{background-color:yellow;}
            100%{background-color:green;}
        }
        @-webkit-keyframes mytransform
        {
            0%{border-radius:0;}
            50%{border-radius:50px; -webkit-transform:translateX(0);}
            100%{border-radius:50px; -webkit-transform:translateX(50px);}
        }
        div
        {
            width:100px;
            height:100px;
            background-color:red;
        }
        div:hover
        {
            -webkit-animation-name:mytransform;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
        }
    </style>

Dans le code ci-dessus, nous utilisons des images clés pour définir deux animations, mais tant que nous utilisons animation-name pour appeler mytransform, l'animation mytransform prendra effet. et mycolor ne prendra pas effet. Dans l'animation mytransform, dans le div, nous changeons la valeur de l'attribut border-radius de 0 à 50px, puis de 50% à 100%, et gardons l'attribut inchangé, horizontalement. Déplacez 50px vers la droite.

De nombreux étudiants se poseront cette question. Nous utilisons tous la pseudo-classe de survol pour implémenter l'animation lorsque la souris se déplace vers l'élément. Ensuite, lorsque nous ouvrons la page Web, l'animation se produira. commencer. Je veux juste avoir un effet d'animation, comment l'implémenter ?

En fait, c'est aussi très simple. Nous trouvons le style dans le div où le pointeur de la souris reste dans le div, le supprimons et changeons le style par le style de l'élément div lui-même. ne jouera pas immédiatement lorsqu’il est ouvert.

Ce qui précède explique comment utiliser l'attribut animation-name pour appeler une animation ? Une introduction complète à l'utilisation de l'animation CSS. Si vous souhaitez en savoir plus sur le Tutoriel CSS3, veuillez faire attention au site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!