Maison > interface Web > Questions et réponses frontales > Combien de types de propriétés de transition CSS3 existe-t-il ?

Combien de types de propriétés de transition CSS3 existe-t-il ?

青灯夜游
Libérer: 2022-03-18 16:58:16
original
3293 Les gens l'ont consulté

Il existe 5 types de propriétés de transition CSS3 : 1. transition ; 2. transition-property 3. transition-duration 4. transition-timing-function ;

Combien de types de propriétés de transition CSS3 existe-t-il ?

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Les transitions CSS vous permettent de modifier en douceur les valeurs des propriétés dans un laps de temps donné.

Il existe 5 types d'attributs de transition CSS3 :

Attribute Description CSS
transition Attribut d'abréviation, utilisé pour définir quatre attributs de transition dans un seul attribut. 3
transition-property Spécifie le nom de la propriété CSS qui applique la transition. 3
transition-duration Définissez la durée de l'effet de transition. La valeur par défaut est 0. 3
transition-timing-function spécifie la courbe temporelle de l'effet de transition. La valeur par défaut est « facilité ». 3
transition-delay Spécifie quand l'effet de transition commence. La valeur par défaut est 0. 3

La transition CSS3 est l'effet d'un élément passant progressivement d'un style à un autre.

Pour y parvenir, deux choses doivent être précisées :

  • Spécifiez la propriété CSS à laquelle l'effet doit être ajouté

  • Spécifiez la durée de l'effet.

Exemple :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

div

{

    width:100px;

    height:100px;

    background:red;

    transition-property:width;

    transition-duration:1s;

    transition-timing-function:linear;

    transition-delay:2s;

    /* Safari */

    -webkit-transition-property:width;

    -webkit-transition-duration:1s;

    -webkit-transition-timing-function:linear;

    -webkit-transition-delay:2s;

}

 

div:hover

{

    width:200px;

}

</style>

</head>

<body>

 

<div></div>

 

<p>鼠标移动到 div 元素上,查看过渡效果。</p>

<p><b>注意:</b> 过渡效果需要等待两秒后才开始。</p>

 

</body>

</html>

Copier après la connexion

Combien de types de propriétés de transition CSS3 existe-t-il ?

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS, front-end web)

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!

Étiquettes associées:
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal