Chaque fois que l'on souhaite changer progressivement le style d'un élément, en passant d'un style à un autre, que ce soit via l'interaction de l'utilisateur ou le temps passé sur le site. Vous pouvez utiliser l’animation pour modifier de nombreux styles sur n’importe quelle période de temps. Jetons un coup d'œil aux propriétés d'animation dont vous avez besoin.
Keyframes− Ceci est utilisé pour spécifier l'animation d'un élément. Il contient les changements qui interviendront dans le style de l'élément. L'élément passe ensuite du style dans lequel il se trouvait au début au dernier style mentionné.
Animation-name - Ceci est utilisé pour référencer des animations afin que vous n'ayez pas à spécifier les règles à chaque fois que vous ajoutez une animation.
Durée de l'animation - Ceci spécifie la durée de l'animation appliquée à l'élément. Sa valeur initiale est de 0 ms et peut se poursuivre indéfiniment.
Animation-iteration-count − Ceci détermine combien de fois l'animation sera répétée.
Animation Delay - Si vous devez retarder l'animation pendant un certain temps, vous pouvez utiliser cette propriété.
Direction de l'animation - Ceci spécifie si l'animation doit être dans le sens avant, dans le sens arrière ou alterner entre les deux directions.
Fonction de temps d'animation - Utilisez cette propriété lorsque vous souhaitez que l'animation ait des intervalles de temps différents au début, au milieu et à la fin.
On peut également utiliser la propriété d'abréviation"animation", qui comprend toutes ces propriétés. Cela fonctionne sur tous les éléments mais n'est pas héritable. Il est important de noter que lorsqu’on utilise la notation abrégée, l’ordre des valeurs est important car chaque valeur est interprétée différemment selon son ordre.
Un exemple d'utilisation de l'animation en CSS est présenté ci-dessous.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animations in CSS</title>
<style>
@keyframes example {
from {
background-color: maroon;
}
to {
background-color: plum;
}
}
div {
width: 500px;
height: 500px;
margin: 12.25%;
background-color: maroon;
animation-name: example;
animation-iteration-count: infinite;
animation-duration: 4s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Maintenant que nous savons ce qu'est l'animation en CSS, nous allons voir comment animer un élément div pour modifier progressivement sa largeur.
Nous utiliserons l'attribut de transition pour résoudre ce problème. Cet attribut est utilisé pour ajouter des effets de transition aux éléments. Il s'agit d'une propriété raccourcie disponible en CSS.
Il définit la transition qui se produit lorsqu'une animation se produit et qu'un élément passe d'un état à un autre. Il s'applique à tous les éléments et n'est pas héritable.
Les propriétés suivantes constituent les propriétés de transition abrégées.
Transition-delay - Cette propriété spécifie combien de temps le navigateur doit attendre avant d'appliquer les propriétés de transition. Sa valeur initiale est 0, les valeurs positives feront attendre plus longtemps et les valeurs négatives rendront la transition plus rapide.
Durée de transition - Ceci définit la durée pendant laquelle l'effet de transition est visible, après quoi l'animation se termine. La valeur par défaut de cette propriété est 0, l'animation est donc invisible par défaut.
Transition-property - Il définit l'élément auquel l'effet de transition sera appliqué. Il peut avoir deux valeurs possibles, aucune et toutes. Par défaut, la valeur est définie sur all, donc tous les éléments ont l'effet de transition appliqué, mais aucun signifie qu'aucun élément n'a cet effet de transition.
Transition-timing-function − Cette propriété est utilisée pour contrôler la vitesse de transition au début, au milieu et à la fin de l'animation. La valeur initiale est définie pour faciliter, mais CSS possède de nombreuses fonctions temporelles prédéfinies.
Nous pouvons définir la propriété de transition en survol et l'animation sera déclenchée en survol ou en utilisant une pseudo-classe d'activité. Nous pouvons également utiliser JS pour allouer dynamiquement des classes et les utiliser pour déclencher des transitions.
Un exemple simple d'utilisation de l'attribut transition en CSS est présenté ci-dessous.
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
font-size: 14px;
transition: font-size 4s 1s;
}
a:hover {
font-size: 36px;
}
</style>
</head>
<body>
<a>This text will have its font modified on hover</a>
</body>
</html>
Lors de l'exécution du programme ci-dessus, un morceau de texte sera affiché, et si vous passez votre souris dessus, vous pourrez voir l'effet de transition du texte.
Nous allons maintenant voir un exemple d'utilisation de transitions pour résoudre le problème en question.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: royalblue;
}
div {
width: 150px;
height: 200px;
background: linear-gradient(
0deg,
rgb(111, 190, 87) 20%,
rgb(119, 218, 119) 50%,
rgb(93, 81, 76) 98%
);
transition: width 2s;
}
.textCenter {
display: flex;
align-items: center;
justify-content: center;
}
div:hover {
width: 500px;
}
</style>
</head>
<body>
<h1>Example of using transition property to increase width gradually on hover.</h1>
<div class="textCenter">Please hover over here</div>
</body>
</html>
La sortie du programme ci-dessus est une div box dont la largeur passe progressivement de 150px à 500px en 2 secondes.
En résumé, utiliser le sélecteur de survol de CSS pour modifier progressivement la largeur d'un élément de partition est un moyen efficace d'ajouter des effets d'animation subtils sans avoir besoin de code supplémentaire. Ceci est particulièrement utile lors de la création d'éléments interactifs dans des pages Web, tels que des boutons et des menus. Avec seulement quelques lignes de code, vous pouvez créer des effets dynamiques pour faire ressortir vos pages.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
