CSS : le guide pour créer votre première animation

Aujourd’hui, de nombreux sites web se dotent d’animations pour se démarquer et améliorer l’expérience utilisateur.

Le CSS est un des langages web utilisé pour créer des animations, et deux solutions s’offrent à vous : soit vous utilisez un « morceau de code » déjà conçu que vous retravaillez pour l’adapter à votre site, soit vous partez de zéro et vous créez votre propre animation.

C’est ce dernier cas de figure que nous allons explorer dans cet article. Ici, vous allez apprendre les bases pour créer votre première animation CSS.

Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.

Intégration HTML

Personnalisation de page web

Création d'animations CSS

Ajout de formulaires

Trouver un développeur web

La structure d’une animation CSS

Une animation CSS est toujours définie par une règle @keyframes suivie du nom de votre animation. C’est ensuite à l’intérieur de ce bloc que vous indiquerez les étapes de l’animation et les propriétés des différents éléments.

Voici donc les premières lignes de CSS à renseigner dans votre fichier CSS :
@keyframes mon-animation {}

Vous allez ensuite placer les règles définissant les états de votre élément sur lequel est joué l’animation. Au minimum vous devez avoir :

• From : c’est l’état initial
• To : c’est l’état final

Dans votre code, voici comment cela s’écrit :

@keyframes mon-animation {
From {}
To {}
}

Dans les blocs From et To vous devez renseigner les règles CSS à appliquer.

Prenons un exemple concret et extrêmement simple, et créons un effet de fondu. Voici ce que cela pourrait donner :

@keyframes fade {
From {
Opacity : 1 ;
}
To {
Opacity : 0 ;
}
}

Lorsque l’animation fade sera appliquée à un élément, ce dernier aura à l’état initial une opacité totale, puis il deviendra transparent à l’état final.

Les propriétés d’une animation

La structure de votre animation CSS est prête ? Parfait.

Maintenant, admettons que nous voulons appliquer notre effet de fondu sur un élément div. Sur cet dernier, il est possible d’appliquer des propriétés pour apporter des réglages à notre animation.

Voici quelques exemples de propriétés que vous pouvez appliquer :

• Animation-delay : correspond au délai avant que l’animation commence. Si vous renseignez « 0s », l’animation commence immédiatement après le chargement de votre page.
• Animation-duration : indique le temps que doit durer l’animation
• Animation-iteration-count : détermine le nombre de fois que doit être répétée l’animation. Utilisez « infinite » pour que votre animation tourne en continu.
• Animation-direction : si vous renseignez « normal » alors votre animation recommencera au début de chaque cycle au lieu de faire des allers-retours
• Animation-name : fait référence à l’animation qui doit être appliquée

Pour un fondu en douceur, nous pouvons appliquer une durée à notre animation et configurer un délai avant le déclenchement.

Voici comment cela se traduit en CSS :

div{
Animation-name : fade ;
Animation-delay : 2s ;
Animation-duration : 3s ;
Animation-iteration-count : infinite ;
}

Cette animation CSS est d’une grande simplicité, mais toute la complexité réside dans les étapes que vous déclarez (ici il n’y en a que deux avec From et To) et les règles que vous appliquez.

Trouvez le meilleur développeur web sur Codeur.com

Vos premiers devis en 15 minutes

Gratuit et sans obligation

Déjà plus de 75 000 clients

Trouver un freelance

Les étapes d’une animation

Pour aller un peu plus loin, nous allons voir comment ajouter des étapes à une animation CSS.

D’abord, comprenez que votre animation est un cycle durant lequel l’état d’un élément est modifié. L’état initial From correspond à l’instant 0% de votre animation, tandis que l’état final To correspond à l’instant 100%.

Pour rajouter un état intermédiaire, il suffit de rajouter un pourcentage, par exemple 50%. Cela signifie qu’une fois arrivé au 50% d’avancement de l’animation, l’élément prend un nouvel état.

Par exemple, si nous voulons passer un élément d’une forme carrée à une forme ronde de façon progressive, tout en modifiant la couleur, voici l’animation que nous pourrions créer :

@keyframes square-to-circle {
0% {
border-radius:0 0 0 0;
background:coral;
}
25% {
border-radius:10% 10% 10% 10%;
background:darksalmon;
}
50% {
border-radius:25% 25% 25% 25%;
background:indianred;
}
75% {
border-radius:40% 40% 40% 40%;
background:lightcoral;
}
100% {
border-radius:50%;
background:darksalmon;
}
}

Cette animation peut être appliquée à un div, et nous allons ajouter de nouvelles propriétés. Nous voulons que cette transformation dure 2 secondes, qu’elle soit appliquée en continu et avec des allers-retours entre l’état initial et final.

div{
margin-left: 50px;
width: 200px;
height: 200px;
background-color: coral;
animation: square-to-circle 2s infinite alternate;
}

Vous connaissez à présent les bases pour créer une animation CSS. À vous d’être créatif et d’appliquer des changements sur vos éléments.

Si vous avez besoin d’aide pour créer une animation complexe pour votre site internet, vous pouvez faire appel à un freelance qualifié en déposant gratuitement un projet sur Codeur.com.