OUJOOD.COM
Transitions CSS3 Comment ça marche ?
En CSS3 les styles transitions sont des effets qui permettent à un élément de passer peu à peu d'un style à l'autre.
Pour ce faire, vous devez spécifier deux choses :
Spécifiez la propriété CSS à que vous souhaitez ajouter un effet
Spécifiez la durée de l'effet.
Remarque : Si la durée n'est pas spécifiée, la transition n’aura aucun effet, car la valeur par défaut est 0.
L'effet démarre lorsque la propriété CSS spécifiée change de valeur en réponse à un événement ou un script, comme quand un utilisateur passe la souris sur un élément il crée l’événement :hover
Pour comprendre l’effet ajouter par la transition nous prenons un exemple, où nous allons faire changer la couleur de lien au survole de la sourie.
Mais vous diriez vous c’est facile il suffit d’utiliser la pseudo classe a:hover et vous avez raison, seulement le changement de la couleur est brutale et nous voulons le faire de manière douce et même en contrôlant le temps de transition.
Voici le code :
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> transition couleur de lien</title>
<style type='text/css'>
<style type="text/css">
body { margin: 50px; }
a {
font-size: 3em;
font-weight: bold;
color: #000;
text-decoration: none;
-webkit-transition-property: color;
-webkit-transition-duration: 1s;
transition-property: color;/*la propriété concérné */
transition-duration: 1s;/*le temps de transition en seconde */
}
a:hover {
color: #f00;
}
</style>
</style>
</head>
<body>
<h1>Transition CSS3 : couleur de lien</h1>
<p>
<a href="#">Survolez-ça</a>
</p>
</body>
</html>
Plusieurs modifications
Pour ajouter un effet de transition pour plus d'un style, ajouter les propriétés supplémentaires, séparées par des virgules :
Exemple Contrôle de deux propriétés en même temps avec transition-proprety
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> transition couleur de lien</title>
<style type="text/css">
body { margin: 50px; }
p{
font-size: 2em;
font-weight: bold;
-webkit-transition-property: background-color, padding-left;
-webkit-transition-duration: 2s;
transition-property: background-color, padding-left;/*les propriétés concérnées*/
transition-duration: 2s;/*le temps de transition en seconde */
}
p:hover {
background-color: #f00;
padding-left:250px
}
</style>
</style>
</head>
<body>
<h1>Transition CSS3 : couleur de lien</h1>
<p>
Survolez ce paragraphe avec la sourie
</p>
</body>
</html>
Exemple : menu simple animé
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> transition couleur de lien</title>
<style type="text/css" media="screen">
ul {
margin:100px;
list-style:none;
font: 1em "lucida grande",arial;
}
li {
float:left;
clear:left;
background:#444;
-webkit-transition-property: background-color, padding-left,font-size ;
-webkit-transition-duration: .5s, .3s;
-webkit-transition-timing-function: linear, ease-out;
/* … and if it's standardised one day (#optimism) */
transition-property: background-color, padding-left,font-size;
transition-duration: .5s, .3s;
transition-timing-function: linear, ease-out;
}
li:hover {
background:#09f;
padding-left:25px;
font-size:1.5em;
}
a {
display:block;
padding:5px;
color:#fff;
text-decoration:none;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</body>
</html>
Exemple : Evénement javascript pour changer le css
Dans cet exemple nous changeons le style css par un script javascript lier au mouvement de la sourie
Lorsque la sourie survole ou quitte l’élément une rotation 3D est crée et la transition contrôle cette rotation.
Et j’en profite pour mettre en évidence d’autres propriétés de transition comme le délais :
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Perspective : Examples</title>
<style>
.conteneur {
width: 200px;
height: 200px;
border: 1px solid #CCC;
}
#boite {
-webkit-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
position: relative ;
}
.box {
width: 100%;
height: 100%;
margin-top:0;
position:absolute;
}
#boite .box {
background-color: #0ff;
-webkit-transform: rotateY( 45deg );
-o-transform: rotateY( 45deg );
transform: rotateY( 45deg );
transition: transform 2s;
-webkit-transition:-webkit-transform 2s;
}
</style>
</head>
<body>
<h1>transition </h1>
<section id="boite" class="conteneur">
<div class="box"><h2>Propriété transition</h2></div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$("#boite").mouseover(function () {
$(".box").css("transform","rotateY( 180deg )");
$(".box").css("-webkit-transform","rotateY( 180deg )");
});
$("div").mouseout(function () {
$(this).css("transform","rotateY(0deg )");
$(this).css("-webkit-transform","rotateY(0deg )");
});
</script>
</body>
</html>
Prise en charge des navigateurs
|
Propriété |
Appui de navigateur |
||||
|---|---|---|---|---|---|
| transition |
|
|
|
|
-webkit- |
Opera, Firefox, Chrome et Internet Explorer 10 prennent en charge la propriété de transition.
Safari nécessite le préfixe - webkit-.
Remarque : Internet Explorer 9 et versions antérieures, ne supporte pas la propriété de transition.
Remarque : Chrome 25 et les versions antérieures, il faut le préfixe - webkit-.
Propriétés de transition
Le tableau suivant répertorie toutes les propriétés de transition :
|
Property |
Description |
|---|---|
| transition | Racourci des propriété transition |
| transition-property | Définit l’effets qui permettent à un élément de passer peu à peu d'un style à l'autre. |
| transition-duration | Définit la durée de la transition |
| transition-timing-function | Définit comment un effet doit se passerv par défaut "ease" |
| transition-delay | Définis le délais avant le début de l’effet par défaut 0 |
Les deux exemples ci-dessous montrent toutes les propriétés de transition je ne donne que le code css:
Exemple Utiliser toutes les propriétés de transition à titre d'exemple :
Exemple : 📋 Copier le code
div
{
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;
}
Exemple Les mêmes effets comme indiqué ci-dessus, à l'aide de la propriété de transition raccourcie de transition :
Exemple : 📋 Copier le code
div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
Par carabde 10 mars 2014
chapitre précédent chapitre suivant