png anime en CSS

Récemment à mon travail, un collègue m'a montré un site de google concernant le Chromebook Pixel

Sur celui ci, on peut voir des animations sur un rollover. En y regardant de plus près, il a vu que c'etait une image png animé. Il m'a demandé si je pouvais reproduire cet effet afin qu'on puisse l'utiliser peut être sur un projet.

J'ai donc regardé le code du site et plus particulièrement celui du png animé.

Dans cet article je vais vous montrer comment le faire en m'appuyant sur le code que j'ai trouvé.

HTML

le code est relativement simple : 

<a href="#" id="pinch-link">
    <span class="gesture-icon"></span>
</a>

 CSS

@keyframes pinch{
    0%{
        background-position:0 0
    }
    100%{
        background-position:-504px 0
    }
}
@-webkit-keyframes pinch{
    0%{
        background-position:0 0
    }
    100%{
        background-position:-504px 0
    }
}
.gesture-icon{
    height:46px;
    width:56px;
    background:#000;
    border:1px solid #535152;
    overflow:hidden;
    position:relative;
    display:block;
}
#pinch-link {
    display:block;
}
#pinch-link:hover .gesture-icon {
    -moz-animation: pinch .5s steps(9,end) 1 forwards;
    -o-animation: pinch .5s steps(9,end) 1 forwards;
    -webkit-animation: pinch .5s steps(9,end) 1 forwards;
    animation: pinch .5s steps(9,end) 1 forwards;
    background-position: 0 0;
}
#pinch-link .gesture-icon {
    background: url(gesture-spread.png) no-repeat 0 0;
}

le code css qui nous interresse est l'animation sur le hover du lien.

-moz-animation: pinch .5s steps(9,end) 1 forwards;
-o-animation: pinch .5s steps(9,end) 1 forwards;
-webkit-animation: pinch .5s steps(9,end) 1 forwards;
animation: pinch .5s steps(9,end) 1 forwards;
background-position: 0 0;

  •  pinch : correspond au nom de l'animation à utiliser
  • .5s : correspond à la durée de l'animation
  • setps(9,end) : la fontion step permet de définir une transition en "escalier" avec 9 le nombre de palier (ou de frame) à franchir et end qui definit que la propriété (ici background) subira la transition à la fin de chaque palier (peut etre start ou end)
  • forwards : on refait l'animation à l'envers quand on quitte le statut hover

Pour en savoir un peu plus sur la fonction step, référez vous à l'article de Lea verou

Démo

 

 

*source : Chromebook pixel website*

image jerome debray

Jerome Debray est responsable de projet et lead developper web pour Ouestfrance Multimedia dans la business unit Auto.

retourner en haut de la page