Quelles règles doivent être appliquées lors de l'utilisation d'une animation CSS3 ?-tutoriel CSS-php.cn

Quelles règles doivent être appliquées lors de l'utilisation d'une animation CSS3 ?

(*-*)浩

Libérer： 2019-06-04 18:02:56

original

5615 Les gens l'ont consulté

Règles CSS3 @keyframes

Définition des balises et instructions d'utilisation

En utilisant les règles @keyframes, vous pouvez créer des animations.

Créez des animations en passant progressivement d'un paramètre de style CSS à un autre.

Vous pouvez modifier les paramètres de style CSS plusieurs fois pendant l'animation.

Spécifiez quand le changement se produit en utilisant %, ou les mots-clés « de » et « à », qui sont identiques à 0 % à 100 %.

0% c'est quand l'animation démarre, 100% c'est quand l'animation est terminée. (Apprentissage recommandé : Tutoriel vidéo CSS3.)

Pour une meilleure prise en charge du navigateur, vous devez toujours définir des sélecteurs pour 0 % et 100 %.

Remarque : utilisez l'attribut d'animation pour contrôler l'apparence de l'animation, et utilisez également le sélecteur pour lier l'animation. .

Syntaxe

@keyframes animationname {keyframes-selector {css-styles;}}

Copier après la connexion

Obligatoire. Un ou plusieurs attributs de style CSS légaux

Valeur

值	说明
animationname	必需的。定义animation的名称。
keyframes-selector	必需的。动画持续时间的百分比。合法值： 0-100% from (和0%相同) to (和100%相同) 注意：您可以用一个动画keyframes-selectors。
css-styles	必需的。一个或多个合法的CSS样式属性

Description

nom de l'animation td>

Obligatoire. Définissez le nom de l'animation.

sélecteur d'images clés

Obligatoire. Pourcentage de la durée de l'animation.

Valeurs légales :

0-100 %de (identique à 0%)à (identique à 100%)

Remarque : vous pouvez utiliser une animation sélecteurs d'images clés.

styles css

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS3</title> 
    <style> 
        div
        {
        width:100px;
        height:100px;
        background:blue;
        position:relative;
        animation:mymove 5s infinite;
        -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
        }
        
        @keyframes mymove
        {
        0%   {top:0px; background:blue; width:100px;}
        100% {top:200px; background:yellow; width:300px;}
        }
        
        @-webkit-keyframes mymove /* Safari and Chrome */
        {
        0%   {top:0px; background:blue; width:100px;}
        100% {top:200px; background:yellow; width:300px;}
        }
    </style>
</head>
<body>

<p><strong>注意:</strong> @keyframes 规则不兼容 IE 9 以及更早版本的浏览器.</p>

<div></div>

</body>
</html>

Copier après la connexion

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!