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

Comment utiliser l'attribut d'animation ? Explication détaillée de l'attribut d'animation

云罗郡主

Libérer： 2018-11-20 17:01:41

avant

4576 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser l'attribut d'animation ? Une explication détaillée de l'attribut d'animation a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Attribut animation-duration

En CSS3, nous pouvons utiliser l'attribut animation-duration pour définir la durée de l'animation, qui est le temps total nécessaire pour la terminer de 0% à 100% . La propriété animation-duration est similaire à la propriété transition-duration dans les transitions CSS3.

Syntaxe :

animation-duration:时间；

Copier après la connexion

Description :

La valeur de l'attribut animation-duration est une heure, l'unité est s (seconde), elle peut être une décimale telle que 0,5 s.

Exemple :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 animation-duration属性</title>
    <style type="text/css">
        @-webkit-keyframes mytranslate
        {
            0%{}
            100%{-webkit-transform:translateX(100px);}
        }
        div:not(#container)
        {
            width:40px;
            height:40px;
            border-radius:20px;
            background-color:red;
            -webkit-animation-name:mytranslate;
            -webkit-animation-timing-function:linear;
        }
        #container
        {
            display:inline-block;
            width:140px;
            border:1px solid silver;
        }
        #div1{-webkit-animation-duration:2s;margin-bottom:10px;}
        #div2{-webkit-animation-duration:4s;}
    </style>
</head>
<body>
    <div id="container">
        <div id="div1"></div>
        <div id="div2"></div>
    </div>
</body>
</html>

Copier après la connexion

L'effet est le suivant :

Comment utiliser lattribut danimation ? Explication détaillée de lattribut danimation

Analyse :

Dans cet exemple, nous définissons # La durée d'animation de l'élément de div1 est de 2s, et la durée d'animation de l'élément de #div2 est fixée à 4s. Grâce aux tests en ligne, nous pouvons clairement voir l’effet.

Permettez-moi de dire ici que les animations CSS3 sont souvent combinées avec des transformations CSS3 pour obtenir des effets d'animation magnifiques et complexes.

Ce qui précède est une introduction complète à la façon d'utiliser l'attribut animation ? Une explication détaillée de l'attribut animation. Si vous souhaitez en savoir plus sur le Tutoriel CSS3, veuillez prêter 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!