Outils pour utilisateurs

Outils du site

Vous êtes ici: Accueil » creation_d_un_site_internet_avec_html5_et_css3 » les_animations_en_css3
Vous n'êtes pas autorisé à effectuer cette action.
creation_d_un_site_internet_avec_html5_et_css3:les_animations_en_css3

Table des matières

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 :

ICN

2) Avec une transition durant 3 seconde :

ICN

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

Redimensionnement d'une image avec la propriété width
Écrire le code permettant de réaliser l'animation suivante :


A faire vous-même 2 Codepen

Transition avec plusieurs propriétés
Écrire le code permettant de réaliser l'animation suivante :


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

Transition avec sur deux images
Écrire le code permettant de réaliser l'animation suivante :

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

Menu animé

A l'aide du cours sur la création d'un menu horizontal, compléter le code CSS afin d’obtenir un menu animé comme ci-dessous.


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

Menu avec une image coulissante

Compléter le code CSS afin reproduire l'animation ci-dessous.

Coucou !


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

Menu
Écrire le code permettant de réaliser l'animation suivante :

  • Portraits
  • Paysages
  • Animaux
  • Sport


A faire vous-même 7 Codepen

Menu
Écrire le code permettant de réaliser l'animation suivante :

  • Portraits
  • Paysages
  • Animaux


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: 15/06/2020 20:11 (modification externe)

Outils de la page

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki