CSS pour obtenir des effets d'animation

CSS est un langage utilisé pour concevoir des styles de pages Web. Il peut non seulement rendre les pages Web plus belles, mais également obtenir divers effets d'animation. Dans cet article, j'expliquerai en détail comment utiliser CSS pour obtenir des effets d'animation.

Concepts de base

Avant de commencer à apprendre les effets d'animation CSS, nous devons d'abord comprendre certains concepts de base. Les plus importants sont : les images clés de l'animation, la durée de l'animation, la vitesse de l'animation, la direction de l'animation et le mode de remplissage de l'animation.

Images clés d'animation

Les images clés d'animation font référence à des points clés spécifiques de l'animation. Dans l'animation CSS, nous pouvons définir plusieurs images clés, chaque image clé définit un état dans l'animation. En passant entre ces images clés, un effet d’animation complet peut être formé.

Durée de l'animation

La durée de l'animation fait référence à la durée totale du début à la fin de l'animation. Nous pouvons utiliser la propriété animation-duration de CSS pour spécifier la durée de l'animation en secondes ou millisecondes.

Vitesse d'animation

La vitesse d'animation fait référence à la vitesse de lecture de l'animation. En CSS, nous pouvons utiliser l'attribut animation-timing-function pour spécifier la vitesse de l'animation. Sa valeur peut être linéaire (linéaire), facilite (facilité d'entrée et sortie), facilité d'entrée (facilité d'entrée), facilité de sortie. (sortie) Facilité) et facilité d'entrée et de sortie (facilité d'entrée et de sortie), etc.

Direction de l'animation

La direction de l'animation fait référence au sens de lecture de l'animation. En CSS, nous pouvons utiliser l'attribut animation-direction pour spécifier la direction de l'animation. Sa valeur peut être normale (lecture avant), inversée (lecture inversée), alternative (lecture alternative) et alternée-inverse (lecture alternative inversée). )attendez.

Mode de remplissage d'animation

Le mode de remplissage d'animation fait référence à l'état de l'élément avant le début et après la fin de l'animation. En CSS, nous pouvons utiliser l'attribut animation-fill-mode pour spécifier l'état avant et après le démarrage de l'animation. Sa valeur peut être aucune (valeur par défaut, aucun traitement n'est effectué), avant (l'état final est l'état à la fin de l'animation), vers l'arrière (l'état initial est l'état au début de l'animation), et les deux ( l'avant et l'arrière sont appliqués), etc.

Méthode d'implémentation

Après avoir compris les concepts de base de l'animation CSS, nous commençons à présenter comment obtenir des effets d'animation.

Première étape : définir les images clés

Tout d'abord, nous devons utiliser le mot-clé @keyframes pour définir les images clés. Par exemple, le code suivant définit une image clé nommée "slidein" pour déplacer les éléments de gauche à droite :

@keyframes slidein{

from{
    left:-100%;
}
to{
    left:0;
}

}

Dans le code ci-dessus, le nom de l'image clé est slidein, qui définit deux états : from (état de départ, la bordure gauche de l'élément est située à l'extrême gauche du navigateur) et to (état final, la bordure gauche de l'élément est située à l'extrême droite du navigateur).

Nous pouvons également utiliser des pourcentages pour définir l'état des images clés. Par exemple, le code suivant définit une animation qui déplace un élément de gauche à droite, s'arrête à 30 %, puis continue de se déplacer vers la droite :

@keyframes slidein{

0%{
    left:-100%;
}
30%{
    left:50%;
}
100%{
    left:0;
}

}

Étape 2 : Appliquer l'animation

Après avoir défini les images clés, nous devons appliquer une animation aux éléments qui nécessitent des effets d'animation. Cette fonction peut être réalisée en utilisant la propriété d'animation de CSS. Par exemple, le code suivant applique une animation nommée "slidein" à un élément et spécifie la durée, la vitesse, la direction et le mode de remplissage de l'animation :

.element{

animation-name:slidein;
animation-duration:2s;
animation-timing-function:ease-in-out;
animation-directioin:normal;
animation-fill-mode:forwards;

}

Dans le code ci-dessus, le nom de l'animation est "slidein", sa durée est de 2 secondes, sa vitesse est d'entrée et de sortie faciles, sa direction est la lecture vers l'avant et son mode de remplissage est l'état final qui est le même que l'état à la fin de l'animation.

Il convient de noter que l'attribut d'animation peut être abrégé en animation : nom de l'animation ou animation : nom de l'animation durée vitesse direction mode de remplissage.

Étape 3 : Définir d'autres propriétés d'animation

Après avoir appliqué l'animation à l'élément, nous pouvons également définir d'autres propriétés d'animation, telles que le temps de retard de l'animation, etc. Nous pouvons utiliser la propriété animation-delay pour définir le temps de retard de l'animation en secondes ou en millisecondes. Par exemple, le code suivant commence la lecture de l'animation après 2 secondes :

.element{

animation-name:slidein;
animation-duration:2s;
animation-timing-function:ease-in-out;
animation-directioin:normal;
animation-fill-mode:forwards;
animation-delay:2s;

}

Résumé

Grâce aux étapes ci-dessus, nous pouvons facilement obtenir divers effets d'animation en utilisant CSS. Il convient de noter que différents navigateurs peuvent avoir des niveaux de prise en charge CSS légèrement différents, alors faites attention aux tests et à l'adaptation lors de l'écriture du code.

L'animation CSS peut rendre les pages Web plus vivantes et intéressantes, attirer l'attention des utilisateurs et améliorer l'expérience utilisateur. J'espère que l'introduction de cet article pourra aider les lecteurs à mieux comprendre l'animation CSS et à rendre la conception Web plus remarquable.

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!