Comment bien utiliser les animations CSS3: tutoriel, exemples de codes et exemples

Mise à jour: 28 août 2013 / Article par: Rochester Oliveira

Lorsque nous utilisons JS et jQuery, nous avons un contrôle total sur les animations et nous pouvons créer des effets impressionnants, mais le prix est assez élevé. Temps de traitement, compatibilité entre navigateurs (les appareils mobiles, par exemple, sont très différents lorsqu'il s'agit de JS) et la complexité du code sont des points à garder à l'esprit lors de la création d'interfaces animées.

Nous verrons donc aujourd'hui comment éviter JS en utilisant des animations et des transitions CSS. Nous allons discuter des étapes élémentaires à d’impressionnants effets, tels que les panneaux d’accordéon et les sous-menus animés.

Prenez un siège, votre bloc-notes et un vrai navigateur (tout sauf IE) et commençons.

Échauffement

L'utilisation d'animations CSS présente de nombreux avantages (et inconvénients, comme tout dans nos vies). Si vous avez besoin de les vendre à votre patron ou à votre client, tenez compte de ces éléments:

  • Ils sont potentiellement plus rapides, car ils peuvent utiliser l'accélération matérielle (comme les implémentations HTML5)
  • Ils fonctionneront mieux sur les appareils mobiles et n'auront pas besoin de code spécifique pour suivre les événements tactiles.
  • JS doit être interprété par le navigateur et les possibilités de le casser sont bien plus grandes. Ainsi, lorsque CSS échoue, il échoue silencieusement alors que JS peut casser la page entière
  • Ils ont un bon support pour les navigateurs (ce site vous aidera à vérifier des statistiques spécifiques à ce sujet: http://caniuse.com/#search )

Exemples d'animations CSS3

Avant de commencer, voyons quelques belles animations en CSS pur.

Pure CSS Twitter Fail Whale

Baleine ratée animée

 Fabriqué par Steven Dennis, voir cela en action.

Canette de coca en rouleau pure CSS
Exemples d'animation CSS 3: défilement d'une canette de coke

Fabriqué par Roman Cortes, voir cela en action.

Pure CSS Walking Man

Exemples d'animation CSS 3: L'homme qui marche

 Fabriqué par Andrew Hoyer, voir cela en action.

Se salir les mains

Commençons le code. Nous allons beaucoup utiliser les pseudo-classes CSS pour déclencher l'animation. Pour être honnête, de nombreux développeurs recommandent d’utiliser JS pour activer et désactiver les animations, mais nous verrons ici le moyen le plus simple:

#test {background: red; } #test: hover {background: green; } #test: active {background: blue; } #test: target {background: black; }

Nous avons quelques autres pseudo-classes à utiliser, mais vous avez l'idée! Voici donc ce qui se passe si vous cliquez sur l'élément #test (en supposant qu'il s'agisse d'un lien):

  • Etat normal: le fond sera rouge
  • Survol: lorsque la souris entre dans la zone de l'élément, son arrière-plan est vert
  • Actif: lorsque vous cliquez sur le curseur et maintenez le bouton de la souris enfoncé, la couleur d'arrière-plan sera bleue
  • Cible: lorsque la page actuelle a le #test dans l'URL, cet élément sera noir

Chacun de ceux-ci peut être utilisé pour des animations CSS. Par exemple, vous pouvez créer des liens 2 pour activer et désactiver l'animation CSS en utilisant le pseudo-élément cible avec ce code:

activer désactiver

Transitions CSS

La transition CSS passera de l'état initial à l'état final en douceur. Vous définissez donc dans le sélecteur principal à l'aide de la propriété «transition» l'heure et chaque propriété qui seront affectées, ainsi que le déroulement de l'animation. Voyons un exemple:

.test {/ * fonction de temporisation de durée de propriété de transition, * / color: blue; transition: couleur 2, taille de police 2 simplifiée; } .test: hover {color: red; } .test: active {taille de la police: 200%; }

Lorsque vous survolez l'élément .test, la couleur passe du bleu au rouge progressivement (quelle belle palette, hein?). Lorsque vous cliquez sur l'élément, la taille de la police augmentera progressivement jusqu'à atteindre 200% de la taille de la police par défaut.

Nous avons également la propriété «timing de transition», définie comme option de soulagement, indiquant comment le «temps» disponible pour l'animation sera utilisé. Voici les valeurs possibles:

  • Linéaire: même vitesse du début à la fin
  • Facilité: début lent
  • Facilité de sortie: fin lente
  • Facilité: Début lent, rapide au milieu, puis fin lente
  • Facilité d'entrée: début lent, fin lente
  • Cubic-bezier (a, b, c, d): vitesse personnalisée

La fonction Bézier cubique crée une animation personnalisée avec des nombres 4 qui varie de 0 à 1, représentant la courbe mathématique de la durée de la vitesse d’animation X.

Pour une meilleure compatibilité du navigateur, vous devriez envisager d'utiliser les préfixes de fournisseur pour opera, Firefox et webkit, comme suit:

div {width: 400px; -o-transition: largeur 2s; -moz-transition: largeur 2s; -webkit-transition: largeur 2s; transition: largeur 2s; }

Vous pouvez également utiliser les requêtes multimédia pour définir différentes transitions en fonction de la largeur du navigateur (appareils mobiles, tablettes). Ceci est un exemple simple:

body {taille de la police: 1em; } Écran @média et (largeur maximale: 800px) {corps {taille de la police: 0.8em; }} @ Écran multimédia et (largeur maximale: 400px) {corps {Taille de la police: 0.7em; }}

Ici, la taille de la police va changer soudainement lorsque vous augmentez la largeur du navigateur. Ce code empêchera que cela se produise, donnant une transition beaucoup plus douce:

body {-o-transition: taille de la police .5s linear; -moz-transition: taille de la police .5s linear; -webkit-transition: taille de la police .5s linear; transition: taille de la police .5s linear; }

Vous pouvez également utiliser cette option si vous avez des affichages ou des tailles différentes pour portrait / paysage, si vous souhaitez modifier les largeurs, les couleurs, les rembourrages et l’affichage des menus.

Animation CSS - Le vrai plaisir commence

L'animation est une séquence de transitions définie dans un sélecteur unique. Pour définir des animations CSS, vous devez suivre les étapes 2.

La règle @keyframe permet de définir une séquence d'étapes d'animation. Elle est définie par un nom unique et les styles décrivant le fonctionnement de cette animation. Comme d'habitude, nous aurons besoin de préfixes de vendeurs, comme dans cet exemple:

/ * le même code pour chaque fournisseur * / @ -o-image-clé mon-animation {... @ -moz-image-clé my-animation {... @ -webkit-image-clé my-animation {... / * nom de l'animation * / @keyframe my-animation {/ * sélecteur d'image * / 0% {/ * style d'image * / Left: 0px; En haut: 0px; } 25% {Gauche: 200px; En haut: 0px; } 50% {Gauche: 200px; En haut: 200px; } 75% {Gauche: 0px; En haut: 200px; } 100% {Gauche: 0px; En haut: 0px; }}

Ainsi, chaque style est défini par l'image / la période (comme les images d'une animation flash) sous forme de pourcentage et les styles qui doivent y être appliqués. Cette image clé, par exemple, indique que l'élément se déplacera à gauche, puis en haut, puis à droite, puis en bas.

Une fois que vous avez suivi l'étape 1 et créé votre image clé, vous pouvez l'appliquer à un élément. Ensuite, nous utiliserons à peu près la même logique que nous avons utilisée pour la transition CSS, à la différence que notre «transition» est maintenant une animation beaucoup plus complexe.

Pour l'appliquer, nous utiliserons la propriété animation, qui comporte des sous-propriétés 7:

  • Nom: cet identifiant unique
  • Durée: combien de temps cela prendra-t-il de 0% à 100%
  • Fonction de synchronisation: pratiquement identique à la fonction de synchronisation de transition
  • Délai: combien de temps faudra-t-il pour démarrer 0%
  • Nombre d'itérations: Combien de répétitions aurons-nous («infini» pour une boucle infinie)
  • Direction: normale ou alternative (en sens inverse)
  • Play-state: si l'animation est en cours d'exécution ou en pause

Ceci appliquera notre animation à l'élément #test lorsque c'est la cible de la page:

#test: target {/ * nom-animation | durée | fonction de synchronisation | délai | compte d'itérations | direction | play-state * / animation: my-animation 10 linéaire 0 linéaire fonctionnant à l'infini; }

Dans cet esprit, nous pouvons créer quelques exemples impressionnants.

Accordéon uniquement CSS

Nous allons créer des panneaux réductibles en utilisant les animations CSS. Voici la structure HTML de base:

Onglet 1 TEXTE 1 Onglet 1 TEXTE 1 Onglet 2 TEXTE 2

Cela ne fera que créer les panneaux et le lien qui déclenchera chacun d'eux. Et voici où la magie opère:

/ * toute div qui est à l'intérieur de l'accordéon * / .accordion div {/ * est caché par défaut * / height: 0; débordement caché; / * la magie noire * / transition: hauteur 1s; } / * lorsque le div mentionné est la cible * / .accordion div: target {/ * height: auto ne fonctionnera pas, mais cela fonctionnera très bien * / height: 80px; }

Assez simple, hein? Et vous avez passé toute votre vie à utiliser JS pour cela? :)

Menu CSS uniquement avec sous-menus

Et ceci est une autre application assez simple. Vous avez certainement un menu de navigation sur votre site, et nous avons souvent besoin d’utiliser certains sous-menus. Le meilleur moyen d'afficher et de masquer des éléments est d'utiliser jQuery, n'est-ce pas? Eh bien, détrompez-vous après avoir testé ce code:

Objet 1 Point 1 Point 11 Point 1.1 Point 12 Point 1.2

Et la magie commence ici:

a {/ * améliorant juste un peu les liens * / display: block; rembourrage: 4px; } nav {text-align: center; } / * n'importe quel menu (y compris le menu principal) * / nav ul {display: inline-block; style liste: aucun; } nav> ul> li {/ * éléments horizontaux (la verticale fonctionnera bien aussi) * / float: left; } nav li div {/ * réduction de n'importe quel sous-menu * / hauteur: 0; débordement caché; / * Sentiments Houdini * / transition: hauteur 1s; } nav li: hover> div {hauteur: 56px; }

résumer

Ceci est certainement juste un guide de démarrage. Il y a beaucoup d'autres effets intéressants qui peuvent être faits en utilisant des animations uniquement CSS et beaucoup de choses à venir.

Alors, avez-vous déjà utilisé cela auparavant? Pouvez-vous penser à une autre bonne application pour les animations CSS? Partagez vos pensées en utilisant les commentaires!

A propos de Rochester Oliveira

Je suis un concepteur de sites Web et un entrepreneur de Itajubá (MG), Brésil. J'aime écrire sur des sujets obscurs et faire des trucs sympas.