Blog iamvdo.meNote : 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 !
#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