Créer des animations à partir de HTML et CSS

Articles-fr / Par

Et Oui! Comme la grande roue d’un parc d’attraction, le HTML5 / CSS3 une fois bien structuré peuvent s’animer et générer un nombre de cycle prédéfinis (ou même infinis). Trouvez ici le moyen de looper une séquence, et les connaissances qui vous permettront de coder une animation unique. Référence: CSS Tricks | W3School

Pré-requis

Des bases en HTML/CSS et savoir estimer le tempo seront nécessaires pour créer votre animation. Grâce au cas pratique vous trouverez des concepts clefs pour générer différents types d’animations HTML5/CSS3. Avant de commencer, vous devrez créer un fichier index.html, style.css.

Animations de boutons

Peut-être avez vous déjà aperçu des animations de boutons/liens un peu partout sur la toile. Souvent plus sobre et stylisé que l’exemple suivant, ce type d’animation est un vrai plus artistique à votre projet. Vous trouverez ici des transitions sur les états :hover, :active, :focus – les cas les plus courants rencontrerez.

HOVER ACTIVE FOCUS
Try the buttons and see transitions: hover, active and focus states.

Cet exemple prend en compte les balises de liens <« a »>, mais sachez qu’il est possible de les intégrer à n’importe quel type de balise sémantique du HTML5: div, section, nav, ul, li, etc… Tous ces exemples fonctionneront de la même manière.

Ici se trouve le code lié à l’exemple précédent. Voyez la séquence HTML très minimale pouvant s’intégrer à votre index.html.

<div>
  <a id="link1" href="#">
    HOVER
  </a> 
  <a id="link2" href="#">
    ACTIVE
  </a> 
  <a id="link3" href="#">
    FOCUS
  </a>
</div>
/*** Default section ***/
div{
  width: 100%;
  margin: 0 auto;
  padding-top: 40px;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}

/*** Set link <a> properties ***/
div a {
  max-width: 300px;
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  padding: 10px 0px;
  background: green;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 20px;

  /* Add transition property */
  transition: 0.5s linear;
}

/*** TRANSITIONS ***/
/* Once mouse is on link */
div a#link1:hover {background:blue;}

/* Once click/tap is active, stay on 
until the release */
div a#link2:active {background:red;}

/* Once the element is clicked one time - loose effect when the user click somewhere else on the page  */
div a#link3:focus {background:orange;}

/* Once you already clicked the link before hand */
/*div a:visited {background:purple;}*/

et voici le CSS avec le détail des fonctions dans les commentaires du code. À titre d’information au niveau de l’indentation du code, il est souvent conseillé de garder une même logique sur les retours à la ligne ou la manière de commenter votre code par exemple. Le plus souvent ce type de règles de consensus s’applique pour des équipes de développeurs (si petites soient-elles) et certains standard peuvent aussi s’appliquer.

Intégrer des loop grâce au KeyFrames

Dans cet exemple, nous avons ici un ensemble de transitions animés sur un loop: couleurs, positions, rotations et ombrages. Ces dernières donnent un effet de 3D au conteneur principale. Vous pouvez bien évidemment alimenter votre version par d’autres propriétés comme : le size, le scale, le z-index, l’opacity, les borders (voir l’article consacré au CSS et découvrez que la plupart des propriétés sont applicables pour vos animations).

Au niveau du HTML c’est très simple, il y a juste deux div à ajouter.

<div id="tile-wrapper">
  <div id="tile"></div>
</div>

Le positionnement en CSS de l’élément se fait en absolute. Les @keyframes définis par pourcentages vous permettront d’établir vos différents états de transitions. Les proportions de la séquence suivent ce type de schéma : 0% début, 25% un quart, 50% la moitié, 75% les trois quarts et 100% la fin de l’animation. Vous pouvez définir davantage d’intervalles si vous le souhaitez, mais aussi, ajouter plus ou moins de transitions.

<style type="text/css">
div#tile-wrapper{
  background:rgba(0,0,0,0);
  width: 95%;
  height: 340px;
  display: block;
  overflow: none; /* Hide everything out of the body panel */
  margin: 0 auto 20px auto;
  position: relative;
overflow:hidden;
}

/* The animation code */
@keyframes AnimationName {
    0%   {
      background-color:#B4B4B4;
      left:-200px;
      transform: rotate(-2deg);
      box-shadow: 10px 8px 0px #B2B2B2;}
    50%  {
      background-color:white;
      box-shadow: 0px 16px 0px #B2B2B2;}
    100% {
      background-color:#B4B4B4;
      left:102%;
      transform: rotate(2deg);
      box-shadow: -10px 8px 0px #B2B2B2;}
}

/* The element to apply the animation to */
div#tile {
    position: absolute;
    top: 4%;
    left: 0%;
    width: 220px;
    height: 300px;
    rotation:30deg;
    border-radius: 20px;
    animation-name: AnimationName;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
</style>

Related Posts