{"id":1221,"date":"2011-05-18T09:24:36","date_gmt":"2011-05-18T08:24:36","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=1221"},"modified":"2015-01-18T16:28:53","modified_gmt":"2015-01-18T15:28:53","slug":"quelques-idees-danimations-simples-en-css3","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/quelques-idees-danimations-simples-en-css3","title":{"rendered":"Quelques id\u00e9es d’animations simples en CSS3 avec la propri\u00e9t\u00e9 transition"},"content":{"rendered":"

Depuis l’arriv\u00e9e des animations en CSS<\/abbr> sur les diff\u00e9rents navigateurs du march\u00e9, de nouvelles possibilit\u00e9s sont offertes aux webdesigners.
\nEn comptant certaines propri\u00e9t\u00e9s de mise en style d\u00e9j\u00e0 reconnues par la plupart d’entre eux depuis des mois, il est facile d’imaginer
\n de petites animations pour agr\u00e9menter vos sites et offrir une meilleure exp\u00e9rience utilisateur \u00e0 vos visiteurs.
\nVous trouverez sur cette page de d\u00e9monstration d’animations en CSS<\/abbr>3<\/a>, quelques exemples d’animations que je vais vous d\u00e9crire ici, mais il n’y a rien de bien sorcier, il suffit de trouver l’id\u00e9e.<\/p>\n

Les animations en CSS3<\/h2>\n

La base<\/h3>\n

Dans un premier temps, lorsque vous devez animer un \u00e9l\u00e9ment, il faut pr\u00e9ciser dans quelles conditions (les param\u00e8tres) gr\u00e2ce \u00e0 la propri\u00e9t\u00e9 raccourcie transition<\/code> de CSS<\/abbr>3.<\/p>\n

.animated {\r\ntransition: all 0.7s ease-out;\r\n}<\/code><\/pre>\n
Avec cette d\u00e9claration vous pr\u00e9voyez une animation sur all<\/code> pour une dur\u00e9e d’animation de 0,7<\/code> secondes sur un effet ease-out<\/code>.
\nL’effet est optionnel, les deux autres param\u00e8tres sont indispensables et peuvent \u00eatre diff\u00e9rents, exemple :<\/p>\n
.animated {\r\ntransition: width 700ms;\r\n}<\/code><\/pre>\n
Ici nous pr\u00e9voyons de n’animer que la largeur de l’\u00e9l\u00e9ment sur une dur\u00e9e d\u00e9finie en millisecondes.<\/p>\n
Voici la structure de base que j’utilise :<\/p>\n
<ul class=\"exemple ex1\">\r\n\t<li><a href=\"#\">Block 1<\/a><\/li>\r\n\t<li><a href=\"#\">Block 2<\/a><\/li>\r\n\t<li><a href=\"#\">Block 3<\/a><\/li>\r\n<\/ul><\/code><\/pre>\n
J’utilise la classe exN<\/code> pour une question de pratique dans la d\u00e9monstration \ud83d\ude09<\/p>\n
Concernant l’aspect des \u00e9l\u00e9ments de la d\u00e9monstration, voici le code, mais libre \u00e0 vous d’utiliser celui qui vous convient le mieux :<\/p>\n
li {\r\n\tdisplay: inline;\r\n}\r\nli a {\r\n\tdisplay: inline-block;\r\n\theight: 85px;\r\n\twidth: 75px;\r\n\ttext-align: center;\r\n\tbackground: white;\r\n\tpadding: 5px 10px;\r\n\tmargin: 0 20px;\r\n\tcolor: #615334;\r\n\ttext-decoration: none;\r\n\tline-height: 5.6em;\r\n\tbackground: -moz-linear-gradient(center bottom , #DACDB1 11%, #F0E8D8 56%) repeat scroll 0 0 #F0E8D8;\r\n\tbackground: -webkit-gradient(linear,left bottom,left top,color-stop(0.3, #DACDB1),color-stop(0.65, #F0E8D8));\r\n\r\n\t-moz-box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 3px #816F47;\r\n\t-webkit-box-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 3px #816F47;\r\n\tbox-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 3px #816F47;\r\n\t-moz-transition: all 0.3s ease-out;\r\n\t-webkit-transition: all 0.3s ease-out;\r\n\ttransition: all 0.3s ease-out;\r\n}\r\n<\/code><\/pre>\n
C’est le code utilis\u00e9 pour tous les exemples qui vont suivre ensuite, avec quelque variantes de temps en temps.
\nJe pr\u00e9cise ici les propri\u00e9t\u00e9s pr\u00e9fix\u00e9es (-moz, -webkit), mais pour all\u00e9ger les prochains codes, je me contenterai de celle sans pr\u00e9fixe, \u00e0 vous de les rajouter.<\/p>\n
L’effet zoom<\/h3>\n
L’effet zoom est le plus simple \u00e0 r\u00e9aliser.
\nSur la version propos\u00e9e par la d\u00e9monstration, j’ai cors\u00e9 un peu la chose en offrant une ombre \u00e0 mon \u00e9l\u00e9ment.<\/p>\n
\"\"<\/p>\n
Cette ombre port\u00e9e va elle aussi subir des modifications pour rendre l’animation r\u00e9aliste.<\/p>\n
.ex1 a:hover,\r\n.ex1 a:focus {\r\n\ttransform: scale(1.2);\r\n\tbox-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 15px #b6a684;\r\n}<\/code><\/pre>\n
Nous utilisons simplement la propri\u00e9t\u00e9 transform<\/code> pour effectuer un zoom (scale<\/code>). La valeur renseign\u00e9e est un coefficient multiplicateur.
\nL’ombre port\u00e9e est diffus\u00e9e davantage et l\u00e9g\u00e8rement \u00e9claircie.<\/p>\n
L’effet de d\u00e9collage<\/h3>\n
Cet effet met en avant une difficult\u00e9 certaine : l’ombre et son animation.<\/p>\n
\"\"<\/p>\n
La base<\/h4>\n
Bien, dans un premier temps on va l\u00e9g\u00e8rement modifier notre base :<\/p>\n
.ex2 a {\r\n\tposition: relative;\r\n\ttop: 0;\r\n\tbox-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 2px #816F47;\r\n\ttransition: all 0.3s ease-in;\r\n}<\/code><\/pre>\n
Nous avons ici une ombre un peu moins importante, et un effet d’acc\u00e9l\u00e9ration dans l’animation.
\nDe plus nous pla\u00e7ons notre \u00e9l\u00e9ment en position relative<\/code> et d\u00e9clarons un top<\/code> \u00e0 0<\/code> pour pr\u00e9voir l’animation \u00e0 venir.<\/p>\n
Cr\u00e9ation de l’ombre<\/h4>\n
Pour ceux qui ont suivi mon tutoriel sur les ombres avanc\u00e9es en CSS<\/abbr>3<\/a>, vous connaissez d\u00e9j\u00e0 la technique. Pour les autres, si cet effet qui va suivre vous int\u00e9resse, je vous invite grandement \u00e0 aller lire ce tutoriel.<\/p>\n
.ex2 a:before {\r\n\tcontent: ' ';\r\n\tposition: absolute;\r\n\tbottom: -1px; left: 0;\r\n\twidth: 100%;\r\n\theight: 6px;\r\n\tbackground: #9b885e;\r\n\tbox-shadow: 0 0 5px #9b885e,0 0 5px #9b885e,0 0 5px #9b885e;\r\n\tborder-radius: 90px\/20px;\r\n\tz-index: -1;\r\n\ttransition: all 0.3s ease-in;\r\n}<\/code><\/pre>\n
Gr\u00e2ce au pseudo-\u00e9l\u00e9ment :before<\/code>, nous construisons notre ombre port\u00e9e. La r\u00e9p\u00e9tition de la m\u00eame box-shadow<\/code> me permet d’intensifier l’ombre pour cr\u00e9er un flou.
\nEnfin, nous pr\u00e9voyons aussi une transition sur cet \u00e9l\u00e9ment, une transition de m\u00eames caract\u00e9ristiques que pr\u00e9c\u00e9demment.<\/p>\n
L’animation<\/h4>\n
Dans un premier temps, super simple : on d\u00e9cale en hauteur le bloc :<\/p>\n
.ex2 a:hover,\r\n.ex2 a:focus {\r\n\ttop: -10px;\r\n}<\/code><\/pre>\n
Ensuite, plus compliqu\u00e9 : nous allons d\u00e9caler inversement l’ombre, l’\u00e9largir et la diminuer en hauteur l\u00e9g\u00e8rement, puis modifier sa couleur vers une plus claire.<\/p>\n
.ex2 a:hover:before,\r\n.ex2 a:focus:before {\r\n\tbottom: -11px;\r\n\tleft: -3px;\r\n\twidth: 106%;\r\n\theight: 4px;\r\n\tbackground: #bcae8f;\r\n\tbox-shadow: 0 0 9px #bcae8f,0 0 9px #bcae8f,0 0 9px #bcae8f,0 0 9px #bcae8f,0 0 9px #bcae8f;\r\n}<\/code><\/pre>\n
Et voil\u00e0, notre effet est pr\u00eat.
\nSuivant !<\/p>\n
L’effet de rotation<\/h3>\n
Pour \u00e9viter de nous retrouver avec un texte qui tourne, je me suis d\u00e9cid\u00e9 \u00e0 faire tourner un \u00e9l\u00e9ment devant le texte, plus discret et moins lourd, quand m\u00eame.<\/p>\n
\"\"<\/p>\n
Mais comme je n’aime pas les choses simples, la fl\u00e8che est construite avec des span<\/code> et du CSS<\/abbr>…
\nLa code HTML<\/abbr> d’un \u00e9l\u00e9ment de liste sur les trois :<\/p>\n
<li>\r\n\t<a href=\"#\">\r\n\t\t<span class=\"arrow\">\r\n\t\t\t<span class=\"mask1\"><\/span>\r\n\t\t\t<span class=\"mask2\"><\/span>\r\n\t\t\t<span class=\"mask3\"><\/span>\r\n\t\t<\/span>\r\n\t\tBlock 1\r\n\t<\/a>\r\n<\/li><\/code><\/pre>\n
La fl\u00e8che, en CSS<\/h4>\n
A partir de notre span.arrow<\/code> compos\u00e9 de trois autres span<\/code>, nous pouvons cr\u00e9er une fl\u00e8che.
\nLes limites de cette technique : le temps, le nombre d’\u00e9l\u00e9ment, le besoin d’avoir une couleur plut\u00f4t unie en fond d’\u00e9l\u00e9ment.<\/p>\n
.arrow {\r\n\tposition: relative;\r\n\ttop: 1px;\r\n\tdisplay: inline-block;\r\n\twidth: 11px;\r\n\theight: 11px;\r\n\tmargin-right: 8px;\r\n\tmargin-left: 0px;\r\n\tbackground: #6a8b9a;\r\n\tbackground: -moz-linear-gradient(90deg,#225872,#225872,#6a8b9a,#6a8b9a);\r\n\tbackground-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #6a8b9a), color-stop(0.50, #6a8b9a), color-stop(0.51, #225872), color-stop(1.00, #225872));\r\n\tbackground-repeat: no-repeat;\r\n}<\/code><\/pre>\n
Nous avons un carr\u00e9 avec un d\u00e9grad\u00e9 en fond.
\nMaintenant nous allons cacher des parties de ce carr\u00e9 pour obtenir une fl\u00e8che :<\/p>\n
.arrow span {\r\n\tposition: absolute;\r\n\twidth: 8px;\r\n\theight: 9px;\r\n\tbackground: #d4c7ab;\r\n\t\/*rotation des masques pour cr\u00e9er l'effet de fl\u00e8che*\/\r\n\ttransform: rotate(45deg);\r\n}\r\n\/*r\u00e9glage au cas par cas*\/\r\n.arrow .mask1 { top: 1px; left: -5px; }\r\n.arrow .mask2 { top: -5px; right: -4px; background: #d7caaf; }\r\n.arrow .mask3 { right: -4px; bottom: -5px; height: 10px; background: #d3c7a9; }<\/code><\/pre>\n
L’animation<\/h4>\n
Une petite retouche de hauteur, et on s’occupe de l’animation :<\/p>\n
\/*petit r\u00e9glage de hauteur pour le lien*\/\r\n.ex3 a { height: 30px; line-height: 25px; }\r\n\/*style de l'animation*\/\r\n.arrow {\r\n\ttransition: all 0.7s;\r\n}\r\n.ex3 a:hover .arrow,\r\n.ex3 a:focus .arrow {\r\n\ttransform: rotate(360deg);\r\n}\r\n\/*vachement compliqu\u00e9, j'avoue...*\/<\/code><\/pre>\n
Je vous passe l’explication… ?<\/p>\n
Vous l’aurez compris, sans l’\u00e9tape de cr\u00e9ation de la fl\u00e8che, avec un simple PNG<\/abbr> \u00e0 la place par exemple, notre code est super simple.<\/p>\n
L\u00e9gende coulissante<\/h3>\n
Je n’ai pas trouv\u00e9 d’autre nom, la version anglaise (Sliding Legend<\/em>) a plus de classe quand m\u00eame !<\/p>\n
\"\"<\/p>\n
Bref, passons !<\/p>\n
Le code HTML<\/abbr><\/h4>\n
Le code HTML<\/abbr> est largement modifi\u00e9 pour cet effet, il s’agit toujours d’une liste, dont voici un \u00e9l\u00e9ment type :<\/p>\n
<li>\r\n\t<figure tabindex=\"0\">\r\n\t\t<img alt=\"\" src=\"img\/img1.jpg\" width=\"200\" height=\"125\" \/>\r\n\t\t<figcaption>Lorem ipsum dolor<span>sit amet, consectetuer adipiscing<\/span><\/figcaption>\r\n\t<\/figure>\r\n<\/li><\/code><\/pre>\n
Il s’agit d’\u00e9l\u00e9ments HTML<\/abbr>5, si vous n’\u00eates pas familiers avec ces \u00e9l\u00e9ments vous pouvez tr\u00e8s bien les remplacer par des div<\/code> avec les classes correspondantes (.figure<\/code>, .figcaption<\/code>).
\nLe tabindex<\/code> nous permet de rendre focusable<\/em><\/abbr> la figure<\/code>, et donc d’agir dessus avec CSS<\/abbr> tout comme on le fait dans la condition :hover<\/code>. Si votre figure<\/code> se trouve dans un lien, le probl\u00e8me de tabindex<\/code> ne se pose pas.<\/p>\n
La base CSS<\/abbr><\/h4>\n
Nous devons aussi modifier la base CSS<\/abbr> :<\/p>\n
.ex4 li {\r\n\tdisplay: inline-block;\r\n\twidth: 200px;\r\n\tmargin: 0 10px;\r\n\tpadding: 5px;\r\n\tbox-shadow: 0 0 65px #CDBE9F inset, 0 0 20px #BEAE8C inset, 0 0 3px #816F47;\r\n}\r\n.ex4 figure {\r\n\tposition: relative;\r\n\tdisplay: inline-block;\r\n\twidth: 200px;\r\n\theight: 125px;\r\n\tmargin: 0;\r\n\ttext-align: center;\r\n\toverflow: hidden;\r\n}\r\n.ex4 figcaption {\r\n\tposition: absolute;\r\n\tleft: 0; bottom: -1em;\r\n\twidth: 200px;\r\n\theight: 2.6em;\r\n\tline-height: 1.5em;\r\n\ttext-align: center;\r\n\tcolor: #fff;\r\n\tbackground: rgba(0,0,0,0.6);\r\n\toverflow: hidden;\r\n\t\/*pr\u00e9paration de la transition*\/\r\n\ttransition: all 0.7s;\r\n}\r\n.ex4 figcaption span { display: block; }<\/code><\/pre>\n
Le conteneur est positionn\u00e9 en relative<\/code> et la l\u00e9gende en absolute<\/code> afin de permettre un positionnement ais\u00e9 de la premi\u00e8re ligne de la l\u00e9gende. Le contenu d\u00e9bordant est cach\u00e9.
\nPour le reste, c’est du style (quasiment).<\/p>\n
L’animation<\/h4>\n
Voici les d\u00e9tails de l’animation : on affiche le reste du texte (estim\u00e9 \u00e0 une seule et unique ligne) et on noirci davantage le fond en transparence de la l\u00e9gende.<\/p>\n
.ex4 figure:hover figcaption,\r\n.ex4 figure:focus figcaption {\r\n\theight: 4.2em;\r\n\tbackground: rgba(0,0,0,0.8);\r\n}<\/code><\/pre>\n
Conclusion…<\/h2>\n
Je ne sais pas s’il doit y avoir une conclusion, mais globalement on peut retenir que :<\/p>\n