La différence entre transition et transformation en CSS-tutoriel CSS-php.cn

La différence entre transition et transformation en CSS

王林

Libérer： 2024-02-18 19:46:19

original

1421 Les gens l'ont consulté

La différence entre transition et transformation en CSS

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;

Copier après la connexion

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>

Copier après la connexion

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);

Copier après la connexion

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>

Copier après la connexion

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!