Navigation

Toutes les catégories

Voir les derniers articles

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...

Publié par Charlotte Chollat

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.

La structure d’une animation CSS

Une animation CSS est toujours définie par une règle @keyframes suivit 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.

Le saviez-vous ?
Dans le cadre d’une animation, une propriété est toujours précédée du terme 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.

Attention
N’oubliez pas de préciser l’animation qui doit être appliquée en utilisation animation-name.

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.

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.

Lire la suite de l'article
Afficher les commentaires (0)

Commentaires

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Webmarketing

Google pénalise les sous-domaines loués sur d’autres thématiques

La pratique courante (et pour l’instant admise) de location de sous-domaines à des marques tierces commence à être pénalisée par Google....

Publié le par Fabian Ropars
Webmarketing

Étude sur les pods, ces groupes qui manipulent l’algorithme d’Instagram pour plus de visibilité

Des chercheurs ont analysé plus d’1,8 million de posts publiés sur le réseau social, dont la visibilité a été boostée par...

Publié le par Alexandra Patard