Transition CSS3
Transition CSS3
En CSS3, nous pouvons ajouter un certain effet en passant d'un style à un autre sans utiliser d'animation Flash ou JavaScript.
Comment ?a marche ?
La transition CSS3 est l'effet d'un élément changeant progressivement d'un style à un autre.
Pour y parvenir, deux choses doivent être précisées?:
Spécifiez la propriété CSS pour ajouter l'effet
Spécifiez la durée de l'effet.
Effet de transition appliqué à l'attribut width, d'une durée de 2 secondes?:
div
{
transition?: width 2s;
-webkit-transition: width 2s; /* Safari */
}
Remarque : Si la durée n'est pas précisée, la transition n'aura aucun effet car la valeur par défaut est 0.
L'effet changera lorsque la valeur de la propriété CSS spécifiée change. Une propriété CSS typique change lorsque l'utilisateur passe la souris sur un élément?:
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style>
div
{
width:100px;
height:100px;
background: #d7ffb5;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>鼠標移動到 div 元素上，查看過渡效果。</p>
</body>
</html>Exécutez le programme pour l'essayer
Modifications multiples
Pour ajouter plusieurs styles d'effets de transformation, ajoutez des attributs séparés par des virgules?:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style>
div {
width: 100px;
height: 100px;
background: #92ffc7;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
</style>
</head>
<body>
<div>鼠標移動到 div 元素上，查看過渡效果。</div>
</body>
</html>Exécutez Essayez le programme
Attributs de transition
Le tableau suivant répertorie tous les attributs de transition?:
| 屬性 | 描述 | CSS |
|---|---|---|
| transition | 簡寫屬性，用于在一個屬性中設置四個過渡屬性。 | 3 |
| transition-property | 規(guī)定應用過渡的 CSS 屬性的名稱。 | 3 |
| transition-duration | 定義過渡效果花費的時間。默認是 0。 | 3 |
| transition-timing-function | 規(guī)定過渡效果的時間曲線。默認是 "ease"。 | 3 |
| transition-delay | 規(guī)定過渡效果何時開始。默認是 0。 | 3 |
Instance
Utiliser tous les attributs de transition?:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style>
div
{
width:100px;
height:100px;
background: #ffedd7;
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>Exécuter le programme pour essayez-le
Le même effet de transition que l'exemple ci-dessus, mais en utilisant l'attribut de transition abrégé?:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
div:hover
{
width:200px;
}
</style>
</head>
<body>
<div></div>
<p>鼠標移動到 div 元素上，查看過渡效果。</p>
<p><b>注意：</b> 過渡效果需要等待兩秒后才開始。</p>
</body>
</html>Exécutez le programme pour l'essayer
