Maison >interface Web >tutoriel CSS >Quelle est l'utilisation des images clés en CSS3

Quelle est l'utilisation des images clés en CSS3

WBOYoriginal: 2021-12-15 17:36:108548parcourir

Les images clés en CSS sont utilisées pour spécifier les actions d'animation des éléments. Il s'agit d'une règle CSS pour créer des animations ; la règle d'image clé se compose du mot-clé "@keyframe" et la syntaxe est "@keyframes animation name{keyframes-selector{css". -styles;} }".

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Quelle est l'utilisation des images clés en CSS3 ?

Cet attribut est étroitement lié à l'attribut d'animation.

keyframes traduit en chinois signifie « images clés ». Si vous avez utilisé le flash, vous devriez mieux comprendre cela. Bien sûr, si vous ne connaissez pas le flash, il n'y aura aucun problème.

L'effet d'animation de transition peut également être obtenu en utilisant l'attribut transition, mais il est légèrement approximatif car il ne peut pas contrôler le processus d'animation de manière plus précise. Par exemple, il ne peut contrôler globalement la transition d'un certain attribut que dans un délai spécifié. période de temps, tandis que l'attribut d'animation peut utiliser @keyframes pour diviser plus précisément l'animation dans la période de temps spécifiée.

Structure grammaticale :

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

Analyse des paramètres :

animationname : déclare le nom de l'animation.

sélecteur d'images clés : utilisé pour diviser la durée de l'animation, vous pouvez utiliser le formulaire de pourcentage, ou vous pouvez utiliser le formulaire "de" et "à". Les formes « de » et « à » sont équivalentes à 0 % et 100 %. Il est recommandé de toujours utiliser la forme de pourcentage.

L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenum 5s infinite;
        }
        @keyframes fadenum{
   100%{transform:rotate(360deg);}
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Résultat de sortie :

Quelle est lutilisation des images clés en CSS3

Si vous êtes intéressé, vous pouvez continuer à visiter : tutoriel vidéo CSS.

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!

html5 css css3 transition animation

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment obtenir un affichage à faible luminosité en CSS3Article suivant：Comment obtenir un affichage à faible luminosité en CSS3

Articles Liés

Voir plus