Maison >interface Web >tutoriel CSS >Comment lire et mettre en pause une animation CSS à l'aide des propriétés personnalisées CSS ?
Comment lire et mettre en pause une animation CSS à l'aide des propriétés personnalisées CSS ?
- 王林avant
- 2023-09-19 08:29:071542parcourir
En SS, les animations sont un moyen efficace d'ajouter des effets visuels à votre site Web. Cependant, nous souhaitons parfois avoir plus de contrôle sur le moment et la manière dont ces animations sont jouées. Ici, nous allons explorer comment utiliser les propriétés personnalisées CSS pour lire et mettre en pause les animations CSS.
Avant de continuer, sachez que les animations CSS peuvent être créées à l'aide d'images clés ou en passant entre deux ou plusieurs états.
Grammaire
@keyframes animation-name {
/* define the animation steps */
}
Nous définissons l'animation en lui donnant un nom et en utilisant le mot-clé @keyframes. À l’intérieur des accolades, nous définissons les étapes de l’animation à l’aide de pourcentages ou de valeurs de mots-clés.
Jouer et mettre en pause l'animation en CSS
En CSS, la lecture et la pause d'animations font référence à la possibilité de contrôler les éléments animés. C'est une façon d'ajouter du mouvement et de l'intérêt visuel à votre site Web.
Les animations de lecture et de pause nous permettent de contrôler quand et comment ces animations sont lues. Ceci est utile si nous voulons que l'utilisateur puisse mettre l'animation en pause lorsqu'il a besoin de se concentrer.
En CSS, nous pouvons utiliser la propriété animation-play-state pour contrôler si l'animation est en cours d'exécution ou en pause. Par défaut, la propriété animation-play-state est définie sur running, ce qui signifie que l'animation sera automatiquement lue lors du chargement de la page. Cependant, nous pouvons utiliser CSS pour modifier la valeur de cette propriété afin de démarrer ou d'arrêter l'animation à tout moment.
Pour créer des effets d'animation de lecture et de pause à l'aide de CSS, vous pouvez suivre ces étapes -
Étape 1 : Définir l'animation
Première étape, nous devons définir l'animation que nous voulons contrôler. Nous pouvons créer une animation simple à l’aide d’images clés.
Étape 2 : Créer des effets de lecture et de pause
Après avoir défini l'animation, nous devons créer l'élément qui contrôle l'animation. Nous pouvons utiliser n'importe quel élément HTML tel que des boutons, des cases à cocher et des effets de survol.
Étape 3 : Définir les propriétés personnalisées CSS
Maintenant, nous devons définir la propriété personnalisée CSS qui contient l'état de l'animation. Nous pouvons utiliser n'importe quel nom pour la propriété personnalisée, mais dans cet exemple, nous utiliserons --animation-play-state et --animation-timingfunction.
Nous comprendrons les concepts ci-dessus à travers des exemples.
Exemple 1
Voici un exemple de création d'une animation de diaporama simple.
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center;}
.box {
display: flex;
height: 80px;
width: 80px;
border-radius: 10%;
color: white;
background-color: green;
position: relative;
animation: my-animation 6s infinite;
}
.box:hover { animation-play-state: paused;}
@keyframes my-animation {
from {left: 0px;}
to {left: 400px;}
}
</style>
</head>
<body>
<h2>A simple animation of a slide</h2>
<div class="box">Mouse Hove to give me a break.</div>
</body>
</html>
Exemple 2
Ceci est un autre exemple de lecture et de pause d'animations CSS à l'aide des propriétés personnalisées CSS.
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center; }
.box {
align-items: center;
background-color: green;
display: flex;
height: 80px;
width: 80px;
margin-top: 10px;
border-radius: 10%;
}
.my-slide {--animdur: 5s; --animn: slide; }
[my-animation] {
animation: var(--animn, none) var(--animdur, 0s) var(--animtf,
linear) var(--animic, infinite) var(--animdir, alternate) var(--animps,
running);
}
[my-animation-pause]:checked~[my-animation] {
--animps: paused;
}
@keyframes slide {
from { margin-left: 0%;}
to {margin-left: calc(100% - 80px);}
}
</style>
</head>
<body>
<input type="checkbox" my-animation-pause id="move" class="#" />
<label for="move" class="#">Check Me to play/paus</label>
<div class="box my-slide" my-animation="stop"></div>
</body>
</html>
Conclusion
L'utilisation des propriétés personnalisées CSS pour lire et mettre en pause les animations CSS fournit un moyen simple et efficace de contrôler les animations sur les pages Web. Dans le premier exemple, nous utilisons l'animation d'images clés pour définir l'animation et la propriété animation-play-state pour contrôler son état. Dans le deuxième exemple, nous utilisons une animation de transition et modifions la valeur d'une propriété personnalisée pour contrôler l'état de l'animation. Les deux techniques permettent de créer des animations dynamiques pouvant être facilement contrôlées à l’aide de 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!