Outils pour utilisateurs

Outils du site


creation_d_un_site_internet_avec_html5_et_css3:les_animations_en_css3

Les animations en CSS3


Comment créer une transition ?

Les transitions permettent, lors d'un événement (au survol de la souris par exemple), le changement progressif de la valeur d'une propriété CSS sur une durée spécifiée.

Exemple : Lors du survol par la souris du rectangle sa propriété CSS background-color est modifiée de rouge à bleu :

1) Sans transition : <html>

.box1{

width: 100px;
line-height: 100px;
text-align: center;
font-size: 50px;
font-weight: bold;
font-family: arial;
background-color: red;
color: blue;

}

.box1:hover{

background-color:blue; }

<p class=“box1”>ICN</p> </html>

2) Avec une transition durant 3 seconde : <html>

.box{

width: 100px;
line-height: 100px;
text-align: center;
font-size: 50px;
font-weight: bold;
font-family: arial;
background-color: red;
color: blue;
margin-left:30px;
transition-property: background;
transition-duration: 3s;
transition-timing-function: ease;

}

.box:hover{

background-color:blue; }

<p class=“box”>ICN</p> </html>

Le code utilisé pour l'exemple sans transition est le suivant :

HTML

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Animation en CSS</title>
   </head>
 
   <body>
 
      <p class="box">ICN</p>
 
   </body>
</html>

CSS

.box{
  width: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 50px;
  font-weight: bold;
  font-family: arial;
  background-color: red;
  color: blue;
}
.box:hover{
  background-color: blue;
}


Pour ajouter une transition à ce changement de couleur d'arrière-plan, il faut compléter le CSS par :

CSS

.box{
  width: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 50px;
  font-weight: bold;
  font-family: arial;
  background-color: red;
  color: blue;
  transition-property: background;
  transition-duration: 3s;
  transition-timing-function: ease;
}
.box:hover{
  background-color: blue;
}
  • transition-property : propriété à laquelle la transition s'applique (dans ce cas, la propriété background).
  • transition-duration : durée de la transition (3 secondes).
  • transition-timing-function : indique la courbe de vitesse entre l’état initial et final d’une transition (ease).

Plusieurs courbes de vitesses sont possibles :

  • ease : Le départ est rapide, l’arrivée lente.
  • linear : La vitesse reste constante au cours de l’animation.
  • ease-in : La vitesse augmente au cours de l’animation.
  • ease-out : La vitesse diminue au cours de l’animation.
  • ease-in-out : La vitesse augmente puis diminue au cours de l’animation.
  • steps (n, start/end) : transition par étapes, avec n le nombre d'étapes. “start” ou “end” indique si la propriété subissant la transition sera modifié au début ou à la fin du délai de chaque étape.

Exemples sur le site w3schools.com.

Comment différer une transition ?

Les transitions peuvent être différés par rapport à l'instant où l’événement déclencheur se produit (survole de la souris) en utilisant la propriété transition-delay. Exemple :

.box{
  width:100px;
  height:100px;
  background-color:red;
  transition-property: background;
  transition-duration: 3s;
  transition-timing-function: ease;
  transition-delay: 2s; /* l'animation démarre 2 secondes après le survol */
}


Comment écrire une transition en une seule ligne de CSS ?

Il est possible de simplifier la déclaration de la transition précédente en utilisant la syntaxe suivante :

transition: background 3s ease 2s;


Comment appliquer une transition à plusieurs propriétés ?

Il est possible d'enchainer plusieurs transitions en les séparant d'une virgule.

transition: background 3s ease 2s, color 3s ease 2s;

Il ne faut pas oublier d'ajouter la propriété color :

.box:hover{
  background-color: blue;
  color: red;
}


Comment appliquer une transition à toutes les propriétés ?

On peut appliquer une transition à toutes les propriétés disponibles en utilisant la valeur all.

En utilisant la valeur all, le code précédent pourrait s'écrire :

transition: all 3s ease 2s;


A faire vous-même 1 Codepen

.image1:hover{

width:300px;

}</style></html>
||


A faire vous-même 2 Codepen

.image2:hover{

width:300px;
opacity: 1;

}</style></html>

Pour vous aider :

La propriété opacity définit la transparence d'un élément.

opacity: 1;   /*Totalement opaque  */
opacity: 0.6;   /* Légèrement transparent */
opacity: 0;   /* Complètement transparent */

||


A faire vous-même 3 Codepen

.image3, .fader:hover .image4{

  opacity: 1;

}

.image4, .fader:hover .image3{

  opacity: 0;

}

.fader .image3, .fader .image4{

  transition: all 1s ease-in-out;

} .fader{

  width:266px;
  margin:auto;

}</style></html>

Pour vous aider :

HTML

<div class="fader">
  <img class="image3" src= http://icn.lycee-valin.fr/dokuwiki/lib/exe/fetch.php?media=html-css:animation_css:portrait-homme1.png>
 
  <img class="image4" src= http://icn.lycee-valin.fr/dokuwiki/lib/exe/fetch.php?media=html-css:animation_css:portrait-homme2.png>
</div>

CSS

.image3{
  position:absolute;
}
.image3, .fader:hover .image4{
    opacity: 1;
 }
 
.image4, .fader:hover .image3{
    opacity: 0;
}

||


A faire vous-même 4 Codepen

.anime-menu li{

width : 100px;
height : 40px;
text-align  :center;
line-height : 40px;
margin-bottom:2px;
font-family: arial;

transition: all 0.2s ease;

} .anime-menu li a{

 display : block ;
 text-decoration : none ;
 color : white ;
 background-color : #333333 ;

} .anime-menu li:hover{

 width:120px;
 font-size:1.5em;
 

} .anime-menu li a:hover{

 background-color : #D0008D ;
 border : 0px #D0008D  solid ; 
 border-radius:0 20px 20px 0;
 text-decoration : none ;

} </style></html>

Pour vous aider :

HTML

<div class="anime-menu">
  <ul>
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Page 1</a></li>
	<li><a href="#">Page 2</a></li>
	<li><a href="#">Page 3</a></li>
  </ul>
</div>

CSS

.anime-menu ul{
  padding: 0px;
  margin: 0px;
  list-style-type: none;
  font-family: arial;
}
 
.anime-menu li{
  width : 100px;
  height : 40px;
  text-align  :center;
  line-height : 40px;
  margin-bottom:2px;
}
.anime-menu li a{
   display : block ;
   text-decoration : none ;
   color : white ;
   background-color : #333333 ;
}


||


A faire vous-même 5 Codepen

position: relative; vertical-align: top; background: #333; color: #fff; height: 200px; width: 200px; margin: 0 auto 0 auto; padding: 0; overflow: hidden; }

.container2 img{

position: absolute;
left: 0;
top: 0;
width:200px;
transition-property: padding-left;
transition-duration: .5s;
transition-timing-function: ease-out;

}

.container2 img:hover{

padding-left:200px;

}

.container2 .texte{

text-align:center;
height:200px;
line-height:200px;
margin:0;
font-size:30px;
font-family:calibri;

}</style></html>

Pour vous aider :

HTML

<div class="container">
  <p class="texte">Coucou !</p>
  <a href="#">
    <img src = "http://icn.lycee-valin.fr/dokuwiki/lib/exe/fetch.php?media=html-css:animation_css:girl.jpg">
  </a>
</div>

CSS

.container{
position: relative;
vertical-align: top;
background: #333;
color: #fff;
height: 200px;
width: 200px;
margin: 0;
padding: 0;
overflow: hidden;
}
 
img{
  position: absolute;
  left: 0;
  top: 0;
  width:200px;
  transition-property: padding-left;
  transition-duration: .5s;
  transition-timing-function: ease-out;
}
 
.texte{
  text-align:center;
  height:200px;
  line-height:200px;
  margin:0;
  font-size:30px;
  font-family:calibri;
}
}


Pour comprendre la propriété overflow : ici

Pour comprendre la propriété position : ici||

A faire vous-même 6 Codepen

position: relative; vertical-align: top; background: #333; color: #fff; height: 200px; width: 200px; margin: 0 auto 0 auto; padding: 0; overflow: hidden; }

.container3 img{

position: absolute;
left: 0;
top: 0;
width:200px;
transition-property: padding-left;
transition-duration: .5s;
transition-timing-function: ease-out;

}

.container3 img:hover{

padding-left:138px;

}

.liste_photos{

padding:20px 0;
margin: 10px 0;
list-style-type: none;
font-family: calibri, serif;

}

.liste_photos li {

font-size: 1.5em;
line-height: 1.5em;
text-decoration : none ;
color : white ;

} </style></html>
||


A faire vous-même 7 Codepen

.container4{ position: relative; vertical-align: top; background: #333; color: #fff; height: 200px; width: 200px; margin: 0 auto 0 auto; padding: 0; overflow: hidden; }

.container4 img{

position: absolute;
left: 0;
top: 0;
width:200px;
transition-property: transform;
transition-duration: .5s;
transition-timing-function: ease-out;
transform-origin: 50% 50%;

}

.container4 img:hover{

transform: rotate(90deg)  translate(138px);

}

.liste_photos4{

padding: 10px;
margin-left: 10px;
list-style-type: none;
font-family: calibri, serif;

}

.liste_photos4 li {

font-size: 1.5em;
line-height: 1.5em;
text-decoration : none ;
 color : white ;

}

</html>

Pour réaliser cette animation, vous devez utiliser la propriété transform.
Voir le cours sur le site :Alsacreations.com.
||

creation_d_un_site_internet_avec_html5_et_css3/les_animations_en_css3.txt · Dernière modification : 05/12/2023 22:23 de 127.0.0.1

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki