Les animation CSS

Les "ready made" sur internet

Des bibliothèques d'animation sont disponible sur internet, il suffit la plupart du temps de récupérer un css, l'ajouter à la page et utiliser les classes proposée, évidement selon un ordre précis.

Les animation "DIY"

Les transitions

Le principe des animations CSS sont, par exemple, de préparer l'élément à l'animation avec une transition, on programme la ou les animations et / ou transformations dans cette transition.

Ensuite, sur le pseudo sélecteur (par exemple au survol :hover) décrire le contenu des transition et / ou transformations.

on utilise soit la propriété raccourcie transition, qui peut être décomposée par :

• transition-property: la propriété CSS subissant la transition
• transition-duration: la durée de la transition en seconde
• transition-timing-function: la façon dont la transition se fait (le "mouvement" à l'écran)
• transition-delay: le délais d'attente avant le lancement de la transition

.scale-up{
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0.2s;
  /*
  transition: transform 0.5s ease 0.2s;
  */
}

.scale-up:hover{
  transform: scale(1.2);
}


Mini exo - animer les cellule du tableau

agrandir les cellule du tableau de 10% au passage de la souris, la durée de l'animation est de 500 milisecondes.

Animation utilisant des images clefs

Comme pour les dessin animés, l'animateur principal va définir des images clefs d'un story board, le navigateur va faire office d'intervaliste et créer les images intermédiaires entre les images clefs.

.espace-animation{
  width: 100%;
  position: relative;
  padding-bottom: 30%;
  background-color: var(--site-third-color-25);
}

.cercle-animation{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 50%;
  font-size: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid var(--site-color);
}

.animation{
  /* on décrit l'animation */   
  /*   
  animation est une propriété raccourcie, qui se compose de
  
  animation-name : nom de l'animation
  animation-duration : durée de l'animation
  animation-timing-function : la vitesse constante ou non de l'animation
  animation-delay : le délai avant le début de l'animation
  animation-iteration-count : le nombre de fois que l'animation se joue
  animation-direction : le "sens" de l'animation (par exemple commencer au début ou à l'envers
  */
  animation-name: fleche-qui-bouge;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}


Appelez-nous :