Ajouter des animations CSS à WordPress

Les animations peuvent être une fonctionnalité attrayante et visuellement intéressante pour vos pages Web. Cependant, la création d'animations avec Flash ou JavaScript consommera une part importante des ressources de votre site.

Heureusement, vous pouvez ajouter des animations à votre site Web WordPress avec des feuilles de style en cascade (CSS) à la place. Ce langage de codage vous permet d'intégrer des animations illimitées sur votre site, mais reste relativement accessible et facile à apprendre.

Dans cet article, nous verrons comment fonctionnent les animations CSS et comment ajouter une propriété d'animation CSS à votre site Web avec et sans plugins. Allons-y!

Comment fonctionnent les animations CSS ? (Et pourquoi vous devriez les utiliser)

CSS3 offre aux utilisateurs la possibilité de créer des animations en modifiant le style d'un élément (par exemple, une image ou un bouton) au fil du temps. Vous pouvez modifier autant de propriétés CSS de l'élément que vous le souhaitez, autant de fois que vous le souhaitez.

Contrairement aux animations Flash ou Javascript, les animations CSS évitent les problèmes de compatibilité du navigateur et le codage compliqué. Cela vous permet d'attirer l'attention sur des fonctionnalités importantes sans effets secondaires négatifs tels qu'une baisse des performances.

Ajouter des animations CSS avec un plugin

Si vous n'êtes pas sûr de vos compétences en codage, nous avons ce qu'il vous faut. Vous pouvez facilement créer des animations CSS avec un plugin à la place.

Étape 1 : Installer et activer un plugin d'animation CSS

Pour commencer, vous devrez installer un plugin d'animation CSS. Nous utilisons Blocks Animation : CSS Animations for Gutenberg Blocks, un outil relativement nouveau spécialement conçu pour l'éditeur de blocs.

Vous pouvez trouver ce plugin en naviguant vers Plugins > Ajouter un nouveau dans votre tableau de bord WordPress. Une fois que vous l'avez localisé, cliquez sur Installer maintenant puis sur Activer :

Une fois l'activation terminée, accédez à la publication ou à la page où vous souhaitez inclure votre animation simple.

Étape 2 : Concevez votre animation

Ensuite, cliquez sur l'élément que vous souhaitez animer. Dans l'onglet Bloc de la barre latérale, recherchez la section intitulée Animation , qui a été ajoutée lorsque nous avons activé le plugin à l'étape 1 . Ici, vous verrez un menu déroulant répertoriant plusieurs effets différents :

Vous pouvez jouer avec autant d'options d'animation que vous le souhaitez pour trouver celle qui convient à votre contenu.

Étape 3 : Personnalisez le délai et la vitesse

Le plugin Blocks Animation est également livré avec une fonction de synchronisation pour personnaliser le délai et la vitesse de votre animation :

Le premier de ces deux paramètres retarde le démarrage de l'animation. Cela peut aider à attirer l'attention sur votre élément après le chargement de la page ou vous permettre d'utiliser des animations en combinaison, comme nous le démontrerons bientôt. Vous pouvez définir la propriété de délai d'animation jusqu'à cinq secondes.

À l'aide de la liste déroulante de vitesse, vous pouvez rendre votre animation lente, plus lente, plus rapide ou plus rapide . Une animation plus lente peut être plus subtile et moins choquante pour les visiteurs, tandis qu'une animation plus rapide attirera davantage leur attention.

Étape 4 : Enregistrez et prévisualisez votre animation

Nous vous recommandons d'enregistrer votre message ou votre page en tant que brouillon et de prévisualiser votre élément animé avant de le publier. Assurez-vous d'enregistrer également la propriété du nom de l'animation si vous travaillez avec plusieurs animations CSS sur une seule page. Bien que les animations puissent s'avérer très utiles, elles peuvent également devenir distrayantes et donner l'impression que vos pages sont encombrées.

Prévisualiser votre page et garder vos animations relativement simples empêchera ces résultats indésirables. Ci-dessous, vous pouvez voir notre exemple d'animation CSS fini, qui associe une image animée au bouton que nous avons stylé dans les étapes précédentes :

Si vous trouvez que votre animation ne correspond pas au reste de votre contenu ou n'a pas l'effet souhaité, vous pouvez simplement revenir à l'éditeur de blocs et l'ajuster. C'est la beauté d'utiliser un plugin d'animation CSS - c'est rapide et facile.

Ajouter des animations CSS sans plugin

Si vous êtes à l'aise pour éditer les fichiers de votre thème, vous pouvez créer manuellement des animations personnalisées sans plugin. Cela demande un peu de savoir-faire en matière de codage, il est donc préférable de laisser cette solution à ceux qui ont une expérience en développement.

Avant de commencer, assurez-vous de sauvegarder votre site. Il est également judicieux d'utiliser un thème enfant, afin de pouvoir facilement revenir aux fichiers par défaut de votre thème si vous en ressentez le besoin.

Étape 1 : Comprendre les propriétés CSS impliquées

Avant de faire une modification, il y a huit propriétés importantes à garder à l'esprit lors de la création d'animations CSS :

• @keyframes : spécifie les styles qui seront appliqués à l'élément via l'animation.
• animation-name : crée un nom que vous pouvez utiliser pour référencer l'animation ailleurs dans votre code.
• animation-duration : définit la durée d'exécution de l'animation.
• animation-delay : Indique combien de temps une animation doit attendre pour commencer une fois la page chargée.
• animation-iteration-count : indique combien de fois l'animation doit s'exécuter.
• animations-direction : Indique dans quelle direction l'animation doit s'exécuter.
• animation-timing-function : détermine la courbe de vitesse de l'animation.
• animation-fill-mode : spécifie un style pour l'élément lorsque l'animation n'est pas en cours de lecture.
• animation : une propriété abrégée pour lier des images clés à des éléments.

La plus importante de ces propriétés à comprendre est l'« image clé ». Ce terme provient de processus d'animation dessinés à la main, où l'image principale était appelée l'image clé et d'autres étaient dessinées pour y entrer ou en sortir.

Dans l'animation CSS, l'image clé spécifie ce qui se passe et quand. Prenez celui-ci, par exemple :

 @exemple d'images clés {
 0 % {couleur de fond : rouge ;}
 25 % {couleur de fond : jaune ;}
 50 % {couleur de fond : bleu ;}
 100 % {couleur de fond : vert ;}
 }

L'image clé ci-dessus indique qu'à 25 % de l'animation, la couleur d'arrière-plan de l'élément spécifié passera du rouge au jaune. Les pourcentages sont généralement utilisés pour définir la synchronisation de l'animation. Cependant, de et à peuvent être utilisés à la place de 0 % et 100 %, respectivement.

Étape 2 : Créez votre fichier animate.css

Pour ajouter des animations CSS, vous devrez créer un fichier dans votre éditeur de texte préféré en utilisant les propriétés ci-dessus. Il devrait inclure des images clés pour toutes les animations que vous souhaitez utiliser. Ensuite, vous les lierez à des classes CSS spécifiques afin de pouvoir les appliquer aux éléments de votre site.

Voici un exemple. Dans le code ci-dessous, nous créons d'abord une animation d'image clé CSS en utilisant les propriétés de transformation et de visibilité, ce qui nous permettra de faire glisser un élément depuis le côté droit de l'écran :

 @keyframes slideInRight {
de {
-webkit-transform : translate3d(100%, 0, 0);
transformer : translate3d(100%, 0, 0);
visibilité : visible ;
}
à {
-webkit-transform : translate3d(0, 0, 0);
transformer : translate3d(0, 0, 0);
}
}

Nous devons ensuite lier cette image clé à une classe CSS. Dans ce cas, il a été nommé slideInRight. Ce code sera placé directement après l'image clé ci-dessus dans le fichier :

 .slideInRight {
 -nom-animation-webkit : slideInRight ;
 nom-animation : slideInRight ;
 }

Vous pouvez répéter ce processus pour créer autant d'animations que vous le souhaitez. Ensuite, enregistrez le fichier sous animate.css. Alternativement, vous pouvez télécharger le populaire fichier Animate.css. Il contient les images clés et les classes CSS pour des dizaines d'animations populaires afin que vous n'ayez pas à coder votre propre animation complexe.

Étape 3 : téléchargez votre fichier animate.css sur votre site

Une fois votre fichier animate.css terminé, vous devrez le télécharger dans le répertoire de votre thème. Pour ce faire, accédez à votre site à l'aide du protocole de transfert de fichiers (FTP) et d'un client FTP tel que FileZilla. Vous pouvez trouver les informations d'identification nécessaires dans votre compte d'hébergement.

Vous devrez entrer votre répertoire public_html , accéder à wp-content > thèmes et trouver le dossier de votre thème actif (ou thème enfant) :

Recherchez un sous-répertoire intitulé css . S'il en existe un, chargez-y votre fichier animate.css (ou le fichier animate.mini.css d'Animate.css). Si vous ne possédez pas déjà ce dossier, vous pouvez facilement créer un nouveau sous-répertoire et le nommer en conséquence :

Une fois votre fichier téléchargé avec succès, ne quittez pas votre client FTP tout de suite. Vous devrez faire un peu d'édition de fichier afin d'accéder à cette feuille de style sur votre site WordPress.

Étape 4 : Appelez la feuille de style Animate via functions.php

Ensuite, dans le dossier de votre thème actif, trouvez votre fichier functions.php . À la fin, ajoutez ce bout de code :

 add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' );
fonction wpb_animate_styles() {
 wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all');
}

Notez que si vous avez téléchargé le fichier animate.min.css depuis Animate.css, vous devrez utiliser animate.min.css dans la dernière ligne au lieu de animate.css.

Cela permet à votre thème d'appeler la feuille de style que vous venez de télécharger afin que vous puissiez appliquer les classes qu'elle contient aux éléments de votre site. Une fois vos modifications enregistrées, revenez à votre tableau de bord WordPress.

Étape 5 : appliquer des animations à l'aide de classes CSS

Vous pouvez désormais appliquer n'importe quelle classe de votre fichier animate.css aux éléments de vos articles et pages. Si vous utilisez le fichier Animate.css, vous pouvez référencer une liste complète de tout ce qu'il inclut sur GitHub.

Accédez à la publication ou à la page contenant l'élément que vous souhaitez animer. Dans l'éditeur classique, passez à l'éditeur de texte. Si vous utilisez l'éditeur de blocs, cliquez sur l'icône à trois points dans la barre d'outils du bloc et sélectionnez Modifier au format HTML :

Ensuite, ajoutez la classe animée et la classe de votre animation à la balise element :

Enfin, prévisualisez votre message ou votre page. Votre animation devrait maintenant fonctionner :

Vous pouvez adapter ce processus pour incorporer n'importe quelle animation dans votre fichier animate.css .

Gardez votre site en bon état avec WP Engine

L'utilisation de fonctionnalités visuellement intéressantes telles que les animations peut engager les visiteurs de votre site et créer une présence en ligne plus professionnelle. Chez WP Engine, nous sommes fiers de fournir les meilleurs trucs et astuces aux développeurs WordPress afin que votre site soit toujours à son meilleur.

Combiné à notre plate-forme d'hébergement de premier ordre, vous disposerez de tous les outils dont vous avez besoin pour impressionner vos utilisateurs. Découvrez nos plans aujourd'hui!