Maison > Article > interface Web > La différence entre transition et transformation en CSS

La différence entre transition et transformation en CSS

王林original: 2024-02-18 19:46:191350parcourir

La transition et la transformation en CSS sont toutes deux des propriétés utilisées pour obtenir des effets d'animation, mais leurs fonctions et méthodes d'utilisation sont différentes.

L'attribut transition est utilisé pour spécifier l'effet de transition des éléments lors du changement des attributs CSS. Grâce à l'attribut de transition, nous pouvons faire en sorte que les attributs de l'élément changent en douceur de l'état initial à l'état final au lieu de changer soudainement. La syntaxe de transition est la suivante :

transition: property duration timing-function delay;

Parmi elles, property représente la propriété CSS à transitionner, qui peut être une propriété unique ou plusieurs propriétés, séparées par des virgules. la durée représente la durée de la transition, en secondes ou millisecondes. timing-function représente la fonction de synchronisation de l'effet de transition, qui est utilisée pour contrôler la courbe de vitesse de la transition. La valeur par défaut est la facilité. delay représente le temps de retard avant le début de la transition.

Voici un exemple d'utilisation de la transition :

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

.box:hover {
  width: 200px;
}
</style>
</head>
<body>

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

</body>
</html>

Dans l'exemple ci-dessus, lorsque la souris survole l'élément .box, la largeur passe en douceur de 100px à 200px.

L'attribut transform est utilisé pour effectuer des opérations de déformation sur des éléments, telles que la rotation, la mise à l'échelle, la translation et l'inclinaison, etc. Avec l'attribut transform, vous pouvez modifier l'apparence d'un élément sans modifier la mise en page du document. La syntaxe de transform est la suivante :

transform: function(value);

Parmi elles, function représente la fonction de déformation à exécuter, qui peut être une rotation, une mise à l'échelle, une translation ou une inclinaison, etc.

Voici un exemple d'utilisation de transform :

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}
</style>
</head>
<body>

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

</body>
</html>

Dans l'exemple ci-dessus, l'élément .box subit une rotation de 45 degrés.

En résumé, l'attribut transition est utilisé pour contrôler l'effet de transition en douceur des attributs CSS, tandis que l'attribut transform est utilisé pour transformer les éléments. Dans les applications pratiques, les deux sont souvent utilisés ensemble pour contrôler l'effet de transition de l'attribut de transformation via l'attribut de transition, obtenant ainsi des effets d'animation plus complexes.

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 Property 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：Comment définir la position d'un élément en CSSArticle suivant：Comment définir la position d'un élément en CSS

Articles Liés

Voir plus