Créer une animation avec l’outil CSS3 @keyframes!

Posted by | juin 26, 2013 | HTML5/CSS3 | 4 Comments
Logo RockmanX

Animation CSS3 avec @keyframes

Comment créer une animation avec l’outil CSS3 @keyframes?

J’avoue faire partie du cercle des intégrateurs rêvant d’animer leurs pages web en utilisant uniquement la CSS, sans javascript et encore moins Flash©. Grâce aux nouvelles évolutions de ce langage, ce rêve est maintenant possible. Les modules CSS3 d’animation donnent la possiblité de paramétrer facilement leurs valeurs à l’aide de @keyframes.

@keyframes? Ça marche comment?

Une animation par @Keyframes (ou images clés) fonctionne grâce au paramétrage de l’état d’un objet (ou ses propriétés) à différent moment de l’animation. Avec cette fonctionnalité CSS surpuissante, nous pourrons configurer toutes les animations qui ont été appliquées sur n’importe quel élément HTML!
LeGwarkshop.fr vous propose une petite démo qui vous permettra de recréer le décor d’un jeu 16-bit! Pour cet exemple, j’ai utilisé un sprite CSS de Sonic sur Game Boy Advance! Si vous voulez en savoir plus sur les keyframes, rendez-vous sur le blog de Lea Verrou ou voir cette vidéo.

Fabriquons le stage de Sonic!

Tout d’abord la base, l’HTML

<div class="wrapper">				         
    <section><!--Premier plan-->
        <div class="sonic"><!--Sonic--></div>
        <div class="grass"><!--Sol--></div>
        <div class="bush"><!--Buissons--></div>
    </section>
    
    <section><!--Second plan-->
        <div class="ocean"><!--Océan--></div>
        <div class="skySonic"><!--Le cliel--></div>
    </section>
    
    <section><!--Troisième plan-->
        <div class="clouds"><!--Les nuages--></div<g
    </section>
</div><!--Fin wrapper-->
			        
			        

Comme vous l’aurez compris, pas de balises <img>. En effet, tout se fera dans la CSS. Nous avons juste besoin d’un wrapper pour gérer les paramètres de position des éléments.

La feuille de style .CSS

Ne pas oublier que le parent wrapper doit impérativement être en postion relative.

.wrapper {
	position: relative;
	overflow: hidden;
}
			        
			     

Appelons à présent les éléments visuels contenus dans le sprite. Vous pouvez fabriquer vos propres sprites à l’aide de Spritepad. Ce service gratuit est très pratique car il génère une feuille de style CSS avec les paramètres background-postion du sprite fabriqué.

.sonic, .bush, .clouds, .grass, .ocean, .skySonic {
	background: url('../img/spriteSonic.png') no-repeat;
	position:absolute;
}

.sonic {
	z-index: 1000;
	top:158px;
	width: 56px;
	height: 56px;
}
				
			

L’animation de Sonic

Créons maintenant l’animation CSS en respectant la règle du @keyframes. Première étape, donner un nom à mon animation. On cherche pour l’instant à animer Sonic (le faire courir) donc appelons-le ‘run’, mais vous pouvez lui donner le nom que vous voulez.
Le keyframes configuré pour l’animation ‘run’ a deux valeurs From & To. Par la suite, il sera plus pratique d’utiliser des valeurs en pourcentage pour le décor.

@keyframes run!

@-webkit-keyframes run {
	
	from { background-position: 0 0; }
	to { background-position: -448px 0; }
	
}

@keyframes run {
	
	from { background-position: 0 0; }
	to { background-position: -448px 0; }
	
}

						
					

Le module d’animation CSS3 est interprété par tous les navigateurs modernes (Internet Explorer 10, Firefow et Opéra). Il existe son équivalent -webkit- pour Chrome et Safari.

L’image de fond se déplacera de 0px à -448px. Normalement, jusqu’ici rien ne devrait se passer tant que nous ne paramétrons pas l’animation avec la propriété animation.
La règle du @keyframes est qu’il faut insérer run dans la propriété animation et de rajouter les paramètres de durée et de défilement désirés.

animation: run

Sonic The Hedgehog

.sonic {
	z-index: 1000; /*<!--Premier plan-->*/
	top:158px;
	width: 56px;
	height: 56px;
		
	-webkit-animation: run 500ms infinite steps(8);
	animation: run 500ms infinite steps(8);
}

						
					

steps() est un ajout supplémentaire au module d’animation CSS3 relativement récent. Au lieu d’interpoler les valeurs, il nous permet de définir le nombre « d’images » de l’animation avec précision. En l’occurence, nous avons 8 images qui décomposent le mouvement de Sonic dans le sprite.

Animer le décor

Nous venons d’animer le personnage de Sonic, il ne manque plus que le décor. Comme indiqué plus haut, les valeurs pour le keyframe seront cette fois-ci en pourcentage. Le principe est exactement le même que pour Sonic, sauf qu’au lieu de définir dans @keyframes la valeur From & To, il faut de donner des valeurs en pourcentage. De cette manière, le défilement du décor sera plus fluide et doux.

@keyframes animation du sol!

@-webkit-keyframes parallax_bg {
	 0% { left: 0px; }
	 100% { left: -512px; }
}

@keyframes Sonic {
	 0% { left: 0px; }
	 100% { left: -512px; }
}

						
					

Ici, la propriété left animera l’image de fond qui se « déplacera » de 0% à 100%. Le sprite faisant 512 pixels de largeur, la valeur de left sera donc négative (-512px). Cela correspond au ‘parcours’ de l’image de fond.
Le nom donné à l’animation qui s’occupe du décor est parallax_bg.

Le défilement du décor

Sonic The Hedgehog

.grass {
   z-index:900;
   width: auto;
   height: 72px;        
   right:0;
   top:206px;
   
   background-position: 0 -316px ;  
   
   -webkit-animation: parallax_bg 2s linear infinite;
   -moz-animation: parallax_bg 2s linear infinite;
   animation: parallax_bg 2s linear infinite;
}
						
					

Voilà, l’animation est presque finie

Il ne nous manque plus qu’à placer l’@Keyframes parallax_bg dans tous les éléments que nous voulons animer. Pensez à changer le temps de défilement de la propriété animation afin de donner un effet de profondeur à votre décor de Sonic.

Démo Sonic The Hedgehog

Sonic The Hedgehog

.bush, .clouds, .grass, .ocean, .skySonic {
   -webkit-animation: parallax_bg linear infinite;
   animation: parallax_bg linear infinite;
   
   right:0;
   width: auto;
   background-repeat:repeat-x;
}

.grass, .bush {z-index:900;}/*<!--Second plan-->*/

.ocean, .skySonic, .clouds {z-index:800;}/*<!--Troisième plan-->*/

.grass {
   height: 72px;
   top:206px;
   
   background-position: 0 -316px ;  
   
   -webkit-animation-duration: 2s;
   animation-duration: 2s;
}

.bush {
   height: 142px;
   top: 66px;
   
   background-position: 0 -416px ;
   
   -webkit-animation-duration: 2.2s;
   animation-duration: 2.2s;
}

.ocean {	
   height: 168px;
   top:128px;
   
   background-position: 0 -147px ;
   
   -webkit-animation-duration: 40s;
   animation-duration: 40s;
}
	
.skySonic {	
   height: 73px;
   top:55px;
   
   background-position: 0 -74px ;
   
   -webkit-animation-duration: 60s;
   animation-duration: 60s;
}

.clouds {	
   height: 15px;
   top:55px;
   
   background-position: 0 -59px ;
   
   -webkit-animation-duration: 25s;
   animation-duration: 25s;
}
						
					

En conclusion

J’ai toujours rêvé de faire des dessins animés, et puis un jour, j’ai réalisé que j’avais tout ce qu’il me fallait avec mon navigateur et notepad. Beaucoup sauteront de leur chaise en disant que l’HTML n’est pas fait pour ça… en grande partie à cause du DOM!
Néanmoins, avec le web rien n’est écrit dans le marbre. C’est en explorant toutes les possibilités que le standard naît. Peut-être qu’un jour il sera préférable de fabriquer une animation en CSS plutôt qu’en Flash© pour nos sites.


4 Comments

Leave a Reply

Your email address will not be published.