OUJOOD.COM
...
Les propriétés CSS
Exemple Survolez un élément div pour modifier progressivement la largeur de 50px à 300px :
Exemple 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:50px;
height:100px;
background:#f0f;
transition:width 2s;
-webkit-transition:width 2s; /* Safari
*/
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<p><b>Remarque :</b> Cet exemple ne fonctionne
pas dans Internet Explorer 9 et versions antérieures.</p>
<div></div>
<p>Survolez l'élément div, ci-dessus, avec la souri pour
voir l'effet de transition.</p>
</body>
</html>
Appui de navigateur
La propriété de transition est prise en charge dans Internet Explorer 10, Firefox, Opera et Chrome.
Safari prend en charge une solution de rechange, la propriété - webkit-transition.
Remarque : La propriété transition n'est pas prise en charge dans Internet Explorer 9 et versions antérieures.
Définition et utilisation
La propriété de transition est une propriété raccourcie pour quatre propriétés de transition:
transition-property , transition-duration , transition-timing-function et transition-delay.
Remarque : Spécifiez toujours la propriété de la durée de la transition, dans le cas contraire, la durée est 0, et la transition n'a aucun effet.
| Valeur par défaut : | toutes facilités 0 0 |
| Héritée : | non |
| Version: | CSS3 |
| Syntaxe JavaScript : | objet . style.transition="width 2 s" |
Syntaxe
transition: property duration timing-function delay;
| Valeur | Description |
|---|---|
| transition-property | Spécifie le nom pour la propriété CSS qui doit subir l'effet de transition |
| transition-duration | Spécifie combien de secondes ou millisecondes nécessaire pour effectuer l'effet de transition |
| transition-timing-function | Spécifie la courbe de vitesse de l'effet de transition |
| transition-delay | Définit un temps avant que l'effet de transition commencera |
CSS3 La propriété transition-property
Exemple
Exemple 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:50px;
height:100px;
background:#f0f;
transition-property: width,height;
transition-duration: 2s;
-webkit-transition-property: width,height; /*
Safari */
-webkit-transition-duration: 2s; /* Safari
*/
}
div:hover
{
width:300px;
height:200px;
}
</style>
</head>
<body>
<p><b>Remarque :</b> Cet exemple ne fonctionne
pas dans Internet Explorer 9 et versions antérieures.</p>
<div></div>
<p>Survolez l'élément div, ci-dessus, avec la souri pour
voir l'effet de transition.</p>
</body>
</html>
Définition et utilisation
La propriété transition-propriété spécifie le nom de la propriété CSS, l'effet de transition est pour (l'effet de transition commencera lorsque la propriété CSS spécifiée).
Astuce : Un effet de transition pourrait se produire en vol stationnaire utilisateur sur un élément.
Remarque : Spécifiez toujours la propriété de la durée de la transition, dans le cas contraire, la durée est 0, et la transition n'a aucun effet.
| Valeur par défaut : | tous les |
| Héritée : | non |
| Version: | CSS3 |
| Syntaxe JavaScript : | objet. style.transitionProperty="width" |
Syntaxe
transition-property: none|all|proprété;
| Valeur | Description |
|---|---|
| none | Aucune propriété n'obtient l’effet de transition |
| all | Toutes les propriétés obtiendront un effet de transition |
| propriété | Définit une liste des noms de propriétés CSS séparés par des virgules, pour l'effet de transition |
CSS3 La propriété transition-duration
En CSS3 la propriété transition-duration est utilisé pour définir la durée d'une transition spécifié. C'est le temps qu'il faudra pour que l'élément ciblé par la transition passe entre deux états définis.
Exemple l'effet de transition modifié pendant 5 secondes :
Exemple 📋 Copier le code
transition-duration: 5s;
-webkit-transition-duration: 5s; /* Safari */
Définition et utilisation
La propriété transition-duration spécifie le temps en secondes (s) ou en millisecondes (ms) nécessaire pour effectuer un effet de transition.
| Valeur par défaut : | 0 |
| Héritée : | non |
| Version: | CSS3 |
| Syntaxe JavaScript : | objet. style.transitionDuration="5s" |
Syntaxe
transition-duration: temps;
CSS3 La propriété transition-timing-function
En CSS3 la propriété transition-timing-function est utilisée pour définir une fonction qui décrit comment une transition se déroulera au cours de sa durée, ce qui permet un changement de vitesse lors de sa course.
Exemple Un effet de transition avec la même vitesse du début à la fin :
Exemple 📋 Copier le code
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
transition-timing-function:linear;
/* Safari */
-webkit-transition:width 2s;
-webkit-transition-timing-function:linear;
}
div:hover
{
width:300px;
}
</style>
Définition et utilisation
La propriété transition-calendrier-fonction spécifie la courbe de vitesse de l'effet de transition.
Cette propriété permet un effet de transition changer les vitesses sur sa durée.
| Valeur par défaut : | facilité |
| Héritée : | non |
| Version: | CSS3 |
| Syntaxe JavaScript : | objet. style.transitionTimingFunction="linear" |
Syntaxe
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
Par carabde 10 mars 2014