Propriétés d'animation CSS : transformation et transition-tutoriel CSS-php.cn

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

PHPz

Libérer： 2023-10-27 16:06:26

original

1028 Les gens l'ont consulté

CSS 动画属性：transform 和 transition

Propriétés d'animation CSS : transformation et 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);

Copier après la connexion

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

transform: scale(1.5, 1.5);

Copier après la connexion

Rotation : rotation (angle)
Échantillon de code :

transform: rotate(45deg);

Copier après la connexion

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

transform: skew(10deg, 0);

Copier après la connexion

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;

Copier après la connexion

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

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

Copier après la connexion

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

transition-delay: 0.5s;

Copier après la connexion

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>

Copier après la connexion

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!