Maison >interface Web >tutoriel CSS >Propriétés d'animation CSS : transformation et transition

Propriétés d'animation CSS : transformation et transition

PHPzoriginal: 2023-10-27 16:06:261056parcourir

CSS 动画属性：transform 和 transition

Dans la conception Web moderne, les effets d'animation sont devenus un élément indispensable qui peut ajouter de la vitalité et de l'attrait à la page. CSS fournit certaines propriétés et fonctions pour obtenir divers effets d'animation, les deux propriétés les plus couramment utilisées sont la transformation et la transition. Cet article présentera ces deux propriétés en détail et fournira des exemples de code spécifiques pour aider les lecteurs à mieux les comprendre et les utiliser.

attribut transform

L'attribut transform est utilisé pour transformer ou faire pivoter des éléments. Grâce à l'attribut transform, des effets tels que la translation, la mise à l'échelle, la rotation et l'inclinaison peuvent être obtenus. Il a les valeurs suivantes couramment utilisées :

Traduction : traduire(x, y)
Échantillon de code :

transform: translate(100px, 50px);

Échelle : échelle(x, y)
Échantillon de code :

transform: scale(1.5, 1.5);

Rotation : rotation (angle)
Échantillon de code :

transform: rotate(45deg);

skew : skew(x-angle, y-angle)
Exemple de code :

transform: skew(10deg, 0);

attribut de transition

L'attribut de transition est utilisé pour ajouter un effet de transition à un élément afin de le rendre fluide lorsque le style change . Grâce à l'attribut de transition, vous pouvez définir le temps de transition, le type de transition, le délai de transition, etc. de l'élément. Il a les valeurs suivantes couramment utilisées :

Temps de transition : durée de transition
Exemple de code :

transition-duration: 1s;

Type de transition : transition-timing-function
Exemple de code :

transition-timing-function: ease-in-out;

Délai de transition : transition-delay
Exemple de code :

transition-delay: 0.5s;

Ce qui précède correspond à l'utilisation de base des attributs de transformation et de transition. Ils peuvent être appliqués aux éléments individuellement ou combinés pour créer des effets d'animation plus complexes. Voici un exemple de code complet qui montre comment utiliser ces deux propriétés pour créer un effet d'animation simple :

Code HTML :

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1s ease-in-out;
}

.box:hover {
  transform: rotate(180deg);
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

Avec le code ci-dessus, le carré rouge tournera dans le sens des aiguilles d'une montre lorsque la souris passera dessus à 180 degrés, et le temps de transition est de 1 seconde, et l'effet de transition est facile (d'abord lent, puis rapide, puis lent).

En résumé, les propriétés de transformation et de transition sont des outils importants pour obtenir des effets d'animation. En utilisant ces attributs de manière flexible, nous pouvons ajouter des effets d'animation vifs et intéressants à la page, améliorant ainsi l'expérience utilisateur et la qualité de la page. Espérons que les exemples de code et les explications fournis dans cet article aideront les lecteurs à mieux comprendre comment utiliser ces deux propriétés.

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!

css html function transform transition

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：Conseils d'optimisation des propriétés d'image réactives CSS : largeur maximale et ajustement de l'objetArticle suivant：Conseils d'optimisation des propriétés d'image réactives CSS : largeur maximale et ajustement de l'objet

Articles Liés

Voir plus