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

4559 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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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