, est souvent utilisé pour regrouper des éléments HTML, puis les styliser à l'aide de CSS. L'animation est un élément graphique doté d'effets visuels pour le rendre plus attractif. En HTML et CSS, nous nommons généralement cet élément
. Cet article expliquera comment CSS lie les animations aux éléments de division.
Utilisez la méthode des images clés pour définir l'animation
La méthode des images clés est le moyen le plus courant de créer des effets d'animation en CSS.
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
width: 50vw;
height: 10vh;
background-color: rgb(103, 28, 141);
animation: myAnimation 2s infinite alternate;
}
@keyframes myAnimation {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(200px);
}
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
La traduction chinoise de
Explication
est :
Explication
Le code HTML utilise l'élément division avec la classe "conteneur" pour l'animation. L'animation, définie dans la règle @keyframes, déplace l'élément de 0 pixel vers la droite jusqu'à 100 pixels, puis vers la droite jusqu'à 200 pixels, dans une boucle alternée.
Le code CSS définit une classe "conteneur" avec une largeur de 50% de la fenêtre, une hauteur de 10% de la fenêtre et une couleur de fond violet. Appliquez l'animation à l'élément en utilisant la propriété 'animation' avec la valeur 'myAnimation 2s alternance infinie'. L'élément div est contenu dans le corps HTML et l'animation sera appliquée lorsqu'elle sera visualisée dans un navigateur Web.
Utiliser un chemin de détourage
Si vous comprenez l'exemple précédent, vous avez dû constater que réaliser une animation très complexe est assez difficile car cela nous oblige à écrire autant de lignes de code manuellement. Il existe donc de nombreux autres outils que nous pouvons utiliser pour obtenir de superbes effets d’animation. Un tel exemple est l’utilisation de chemins de détourage.
clip-path est une propriété CSS qui permet de spécifier une zone spécifique d'un élément à afficher (découpée) tout en masquant le reste de l'élément.
Nous pouvons définir des zones par des chemins de détourage, qui peuvent être créés à l'aide de formes de base telles que des cercles, des rectangles, des polygones ou des chemins SVG.
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: rgb(220, 221, 158);
width: 50vw;
padding: 20px;
text-align: justify;
border-radius: 20px;
clip-path: circle(23.2% at 100%);
}
.container:hover {
clip-path: circle(141% at 100%);
transition: 1s;
}
</style>
</head>
<body>
<div class="container">
<h1>Hello world</h1>
<p>This is the body of the text</p>
</div>
</body>
</html>
La traduction chinoise de
Explication
est :
Explication
Ici, le document HTML utilise un conteneur flex pour afficher les éléments enfants, centrés horizontalement et verticalement. L'élément body a une hauteur de 100vh et la classe .container a un masque d'écrêtage circulaire et un effet de transition en survol.
La classe .container a une couleur d'arrière-plan, une largeur, un remplissage et un alignement du texte, un rayon de bordure de 20 pixels et une propriété clip-path qui crée un masque circulaire. La pseudo-classe de survol modifie la taille du chemin du clip avec un effet de transition d'une seconde.
Pour approfondir ce sujet, nous vous recommandons de lire le tutoriel suivant pour en savoir plus sur le sujet -
https://www.tutorialspoint.com/css/css_clip.htm
Conclusion
Dans cet article, nous avons appris à lier des animations à des éléments div à l'aide de CSS. Nous examinons en exclusivité l'utilisation de la méthode des images clés pour faire la même chose. Nous pouvons personnaliser les propriétés de l'animation telles que la durée, le délai, le comportement, etc.