Comment utiliser l'attribut animation-name pour appeler une animation ? Explication détaillée de l'attribut animation-name-tutoriel CSS-php.cn

Comment utiliser l'attribut animation-name pour appeler une animation ? Explication détaillée de l'attribut animation-name

云罗郡主

Libérer： 2018-11-20 16:58:17

avant

3642 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser l'attribut animation-name pour appeler une animation ? L'explication détaillée de l'attribut animation-name a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'elle vous sera utile.

Attribut animation-name :

En CSS3, les animations définies à l'aide des règles @keyframes ne seront pas exécutées automatiquement. Nous devons également utiliser l'attribut animation-name pour appeler l'animation, puis le. l'animation prendra effet.

Syntaxe :

animation-name : animation name;

Explication :

Notez que le nom de l'animation appelé par animation-name doit être défini avec la règle @keyframes Les noms d'animation sont totalement cohérents (sensibles à la casse). S'ils sont incohérents, il n'y aura pas d'effet d'animation. Pour la compatibilité des navigateurs, le préfixe -webkit- est requis pour les navigateurs Chrome et Safari, et -moz- est requis pour les navigateurs Firefox.

Code :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 animation-name属性</title>
    <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>
</head>
<body>
    <div></div>
</body>
</html>

Copier après la connexion

L'effet est le suivant :
Comment utiliser lattribut animation-name pour appeler une animation ? Explication détaillée de lattribut animation-name

Analyse :

Ici j'utilise @ définition de règle d'images clés 2 animations : mycolor et mytransform. Mais nous utilisons uniquement animation-name pour appeler l'animation nommée mytransform. Par conséquent, l’animation nommée mytransform prendra effet, mais l’animation nommée mycolor ne prendra pas effet.

Dans l'animation mytransform, la valeur de l'attribut border-radius de l'élément div passe de 0 à 50px entre 0% et 50%, puis maintient la valeur de l'attribut border-radius inchangée entre 50% et 100%. Et déplacez-le de 50 pixels horizontalement vers la droite.

Méthode (1) :

@-webkit-keyframes mytransform
{
0%{border-radius:0;}
50%{border-radius:50px;-webkit-transform:translateX（0）；}
100%{-webkit-transform:translateX（50px）；}
}

Copier après la connexion

Méthode (2) :

@-webkit-keyframes mytransform
{
0%{border-radius:0;}
50%{border-radius:50px;}
100%{-webkit-transform:translateX（50px）；}
}

Copier après la connexion

Les débutants le font souvent J'ai une question. Chaque fois que nous définissons : survolez la définition de la pseudo-classe, l'animation démarre lorsque la souris passe sur l'élément. Et si nous voulons que l'animation soit automatiquement exécutée la première fois que nous ouvrons la page Web ?

En fait, c'est très simple. Nous supprimons le style lorsque le pointeur de la souris reste sur l'élément div, et réécrivons le code dans le style de l'élément div lui-même, devenant le code comme indiqué ci-dessous. , alors l'animation s'ouvrira immédiatement sur la page Jouer.

div
{
    width:100px;
    height:100px;
    background-color:red;
    -webkit-animation-name:mytransform;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:linear;
}

Copier après la connexion

Ce qui précède explique comment utiliser l'attribut animation-name pour appeler des animations ? Une introduction complète à l'explication détaillée de l'attribut animation-name. 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!