Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Animation « effet bounce » en CSS

Créer un effet de rebond avec les animations

Création: juin 2011Modifié:

Contenu
Full CSS Pas de JavaScript
Navigateurs
Firefox Safari Chrome Opera Internet Explorer
Partagez
Facebook Twitter

Votez

73 votes4.38

Demo 100% CSS. Pas d’utilisation de JavaScript. Utilisation des keyframes (animations). Variante avec les transformations CSS également.

Note : MAJ importante le 13 septembre 2012.

Voici une animation très simple à réaliser !

Préparation

Pour cette démo, nous avons besoin de 3 images :

  • l’icone
  • le reflet
  • l’ombre

(PS : J’ai fais le choix de créer 3 div et d’utiliser les images en background CSS, mais il est tout à fait possible d’utiliser d’autres éléments, voire la balise img)

Voici le code HTML :

<div id="ical">
</div>
<div id="icalr">
</div>
<div id="icalo">
</div>

Tout d’abord, on positionne les 3 div :

div{
position:absolute;
}

#ical{
    width:64px;
    height:65px;
    top:106px;
    left:259px;
    z-index:5;
    background:url('ical.png');
}

#icalr{
    width:60px;
    height:20px;
    top:167px;
    left:263px;
    z-index:5;
    background:url('icalr.png');
}

#icalo{
    width:63px;
    height:28px;
    top:142px;
    left:257px;
    z-index:3;
    background:url('icalo.png');
}

Chaque div est dimensionnée (avec width et height, positionnée (avec top et left) et reçoit une image en background. Le z-index nous permet de gérer l’ordre d’empilement.

Les animations

Enfin, il nous suffit de créer trois animations différentes pour les effets de rebond. (deux animations seront quasiment identiques).

Voici le code de la première animation (sans préfixes) :

#ical{
    ...
    animation: bounce 0.7s ease infinite;
}

@keyframes bounce{
    from {top: 106px;}
    50%  {top: 86px;}
    to   {top: 106px;}
}

On remarque ici que l’animation agit sur la valeur top. Cette valeur commencera à 106px ( valeur du placement initial en CSS ) et finira à cette même valeur mais en oscillant de -20px ( à 50% de l’animation ).

Notre animation est ajoutée ensuite : elle durera 0.7secondes, avec une méthode d’accélération ease, de manière infinie !

Simplifier l’animation

Il est possible de gagner encore en maintenabilité et en place dans le code CSS en créant une animation qui sera jouée en sens inverse les cycles pairs. De ce fait, l’animation perd une étape :

#ical{
    ...
    animation: bounce 0.35s ease infinite alternate;
}

@keyframes bounce{
    from {top: 106px;}
    to   {top: 86px;}
}

Pour cela, le mot-clé alternate est ajouté, et le temps de l’animation a été divisé par 2 !

Et avec les transformations ?

Bien que nous utilisions l’animation sur les valeurs top et que cela fonctionne, il serait plus « fun » d’utiliser les transformations CSS. Voici ce que le code pourrait donner :

#ical{
    ...
    animation: bounce 0.35s ease infinite alternate;
}

@keyframes bounce{
    from {transform: translateY(0);}
    to   {transform: translateY(-20px);}
}

Il est également envisageable d’utiliser margin-top au lieu de top. Cela permet d’avoir un décalage relatif à la position de base sans pour autant mettre en place les transformations CSS.

Attention : ne pas oublier de préfixer votre CSS !

Envie d'une nouvelle démo?

Un p'tit mot...

#1par Adrien, le 24 août 2011

Super tuto ! Effet à couper le souffle !
Merci ;)

#2par Blitz, le 5 janvier 2012

Est-il possible de le faire avec seulement l’image ? ( Sans le reflet et l’ombre )
Je n’y arrive pas :/

#3par vive firefox10, le 14 janvier 2012

Assez marrant
Je vais essayez d’améliorer ce script en essayant d’alterner celui qui bouge.
L’ombre sous l’image rendl’effet vraiment réaliste.

#4par Ced, le 16 janvier 2012

Sympa !
Je m’étais amusé à faire la même mais en allant plus loin sur l’utilisation des pseudo classe permettant le reflet...
Je mettais l’image dans le content sur la pseudo classe :after et via la prop transform via scale en Y négatif + une opacité moindre permet d’avoir le reflet. Ce qui permet de n’avoir qu’une div par icone.
Le problème, c’est que seul Firefox permet de jouer une animation sur l’element virtuel "after" (ou alors je n’ai pas trouvé comment sur les autres). Du coup, le reflet part dans le mauvais sens sous Chrome et consort...
De plus, je n’ai pas l’ombré non plus (peut être qu’avec les filter cela sera possible...)
le code :

.icon::after {
content: url(monimage.png);
display: block;
position: absolute;
top: XXpx;
height: XXpx;
width: XXpx;
opacity: 0.3;
-moz-transform: scaleY(-0.7);
-webkit-transform: scaleY(-0.7);
-o-transform: scaleY(-0.7);
}

en pratique : http://cedricrey.fr/atelierWeb/CSSd...
Le rendu est évidement bien meilleur sur votre démo !
Je me permets de reprendre vos valeurs pour le timing, car même si mes cours de physiques ne sont pas très loin, j’ai eu la flemme de calculer et l’effet de l’animation est désastreux sur ma page...
En tous cas chapeau pour votre démo !!!

#5par css3create, le 16 janvier 2012

@Ced : Bravo ! Très bonne idée... même si c’est vrai que les transitions et animations sur les pseudo-éléments ne fonctionne qu’avec Firefox. Bientot sur les autres navigateurs ?

Vincent

PS : Je me suis permis d’ajouter les balises <code> pour plus de clarté.

#6par paline, le 11 février 2012

super ! mais je n arrive pas à l installer :/

#7par zakariadza, le 16 mai 2012

En fait, l’équation de la courbe n’est pas y=x^2 mais y=-x^2.
Merci pour le tuto en tout cas :p

#8par http://www.grainedebeauterouen.fr, le 12 février 2013

merci pour ce tuto c est bluffant


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)