[CSS-JS]Animation CSS simple

Structure HTML de base

<div class="cadre">
  <img src="//club.developpez.com/webdesign/Rubriques/Web/CSS/logo_outils_css.gif" alt="">
</div> 

Animation au survol

L'animation consiste à faire apparaître l'image au survol de l'élément conteneur puis à faire disparaître celle-ci lorsque l'on quitte la zone.

L'animation est géré par le CSS grâce à l'utilisation du sélecteur #cadre:hover img et l'utilisation de la propriété transition affectée à l'image.

.cadre img {
  position: absolute;
  right: -100%;
  transition: all .5s;
}
.cadre:hover img {
  right: 0;
}

Animation sur action

L'animation consiste à faire apparaître l'image sur une action, ici appui sur un élément <button>, puis à la faire disparaître sur une autre action, ici un nouvel appui sur le même élément <button>.

image

L'animation est déclenchée en ajoutant/supprimant une classe à l'image, ceci est géré en JavaScript en utilisant la méthode element.classList.toggle().

// ajout/suppression de la class au click
oBtn.addEventListener('click', function (e) {
  oImg.classList.toggle('visible');
});

L'animation proprement dite est gérée par le CSS.

.cadre img.visible {
  right: 0;
}

Animation va et vient sur action

L'animation consiste à faire apparaître puis disparaître l'image sur une action, ici appui sur un élément <button>.

show-hide

L'animation est déclenchée en ajoutant une classe à l'image, ceci est géré en JavaScript en utilisant la méthode element.classList.add() puis en la supprimant en fin d'animation.

// ajout de la class au click
oBtn.addEventListener('click', function (e) {
  oImg.classList.add('show-hide');
});

La suppression en fin d'animation se fait en plaçant un écouteur animationend sur l'image, et en utilisant la méthode element.classList.remove().

// supprime la class en fin d'animation
oImg.addEventListener('animationend', function(e){
  this.classList.remove('show-hide');
});

L'animation proprement dite est gérée par le CSS en utilisant la propriété animation et une règle @keyframes.

.cadre img.show-hide {
  animation: show-hide 1s linear;
}
@keyframes show-hide {
  0% {
    right: -100%;
  }
  40% {
    right: 0;
  }
  60% {
    right: 0;
  }
  100% {
    right: -100%;
  }
}