Qu'est-ce que la propriété de direction d'animation CSS : tout ce que vous devez savoir

Que pensez-vous que le CSS ne sert qu'à créer des animations ? En effet, c'est le cas, mais en même temps, vous pouvez également utiliser CSS pour contrôler la vitesse, la durée, la direction, l'heure de début, etc.

Que vous souhaitiez que votre animation se déplace vers le haut ou vers le bas, la propriété CSS animation-direction dans le développement Web vous permettra d'atteindre vos objectifs.

Êtes-vous nouveau dans ce domaine ? Ne vous inquiétez pas ! Dans ce blog, vous apprendrez tout sur les propriétés d'animation CSS.

Maintenant, sans plus tarder, comprenons ce qu'est l'animation CSS, ainsi que son utilisation.

Qu'est-ce que la propriété CSS animation-direction ?

La propriété de direction de l'animation CSS concerne la direction de l'animation. Une fois que vous avez défini cette propriété, vous pouvez facilement définir le cycle d'animation vers l'arrière, vers l'avant ou dans une autre direction.

Maintenant, regardons les différentes directions d'animation :

• direction de l'animation : normale ;
• direction de l'animation : inverse ;
• direction de l'animation : alternée-inverse ;
• animation-direction : alternative ;

Pour vous aider davantage, j'ai partagé la syntaxe de la propriété animation-direction. Espérons que cette syntaxe vous aidera à créer des animations comme un pro.

/* La propriété Animation unique de l'animation CSS */

• direction de l'animation : normale ;
• direction de l'animation : inverse ;
• animation-direction : alternative ;
• direction de l'animation : alternée-inverse ;

/* La propriété Multiple animations of CSS animation */

• direction de l'animation : normale, inversée ;
• direction de l'animation : alternée, inversée, normale ;

/* Les valeurs globales de la propriété d'animation CSS */

• direction de l'animation : hériter ;
• direction de l'animation : initiale ;
• direction de l'animation : revenir ;
• direction de l'animation : non définie ;

Maintenant que vous connaissez les différentes propriétés d'animation CSS, il est temps de comprendre les valeurs des propriétés d'animation CSS.

Valeurs de la propriété CSS Animation

Normal

Si vous utilisez cette propriété, l'animation sera lue vers l'avant. Cela signifie que pour chaque cycle d'animation, l'animation sera réinitialisée à l'état de départ et recommencera.

La valeur -" Normal" est essentiellement la valeur par défaut de la propriété animation-direction en CSS. Donc, si vous ne définissez pas cette propriété, alors par défaut, elle jouera vers l'avant.

Inverse

L'animation inversée concerne les animations qui sont effectuées dans le sens inverse à chaque cycle. Dans ce style, les étapes d'animation et les fonctions de synchronisation sont exécutées à l'envers.

Par exemple, une fonction de temporisation d'entrée devient une fonction de sortie.

Alterner

L'animation alternative change de sens à chaque cycle, avec la première itération dans le sens avant . Le comptage sert à déterminer si un cycle est impair ou pair commence à un.

Alterné-inverse

L'inverse alterné inverse le sens de chaque cycle, la première itération étant jouée à l' envers . Le décompte consiste à déterminer si un cycle est pair ou impair, en commençant à un.

CSS Raccourci pour animation-direction

Vous serez étonné de savoir que vous pouvez également définir diverses propriétés d'animation, y compris la direction de l'animation, ce qui peut être fait en utilisant la propriété CSS de raccourci d'animation.

La propriété raccourcie CSS animation applique l'animation entre les styles. Il s'agit d'une méthode abrégée pour définir toutes les propriétés d'animation telles que le nom de l'animation, la durée de l'animation, la fonction de synchronisation de l'animation, le retard de l'animation, le nombre d'itérations de l'animation, la direction de l'animation, le mode de remplissage de l'animation et la lecture de l'animation. Etat.

Problèmes courants d'animation CSS

Que votre animation ne fonctionne pas comme vous le souhaitez ou ne fonctionne tout simplement pas du tout, voici quelques raisons de problèmes et comment les résoudre :

Pas de règle @keyframes

Dans les animations CSS, la règle @keyframes définit l'apparence de l'animation. Plus précisément, il définit quels styles d'éléments changent et quand. Sans cette règle, votre élément n'aura aucune animation à utiliser. Alors la toute prochaine fois, vérifiez si votre règle @keyframes existe et si son nom correspond à celui du nom de l'animation de l'élément ciblé.

Durée de l'animation non définie

Supposons que vous ayez attribué une règle d'images clés à l'élément, mais qu'il ne semble toujours pas jouer si vous n'avez pas défini de durée d'animation. Par défaut, zéro seconde correspond au cycle d'animation CSS.

Pour remplacer ce cycle, vous devez incorporer une règle de durée d'animation dans votre élément ciblé avec une valeur en secondes, tout comme dans le même bloc que le nom de l'animation.

L'animation commence trop tôt

Parfois, vous devrez peut-être proposer un report rapide avant le début de l'animation pour une meilleure expérience client. Accomplissez ceci avec les effets personnels de report d'animation.

Propriétés CSS non animables

Une autre raison pour laquelle l'animation ne fonctionne pas peut-être que vous essayez d'animer une propriété CSS qui n'est pas animable.

L'animation CSS n'est pas prise en charge

Peintures d'animations CSS sur la plupart des navigateurs mobiles et informatiques actuels. Cependant, vos animations ne fonctionneront pas si vous utilisez un ancien navigateur ou un modèle de votre navigateur qui n'a pas été mis à jour depuis de nombreuses années, sans doute à cause d'une perte d'assistance du navigateur.

Si vous avez mis à jour le navigateur et que vous rencontrez toujours des problèmes, essayez d'inclure vos politiques d'animation avec des préfixes de fournisseur plus loin dans vos politiques authentiques et essayez à nouveau l'animation.

CSS Shorthand écrit de manière incorrecte

La sténographie CSS est un excellent moyen d'écrire du CSS de nettoyage et de réduire la quantité de code dans votre fichier. Les effets d'animation sont un raccourci pour ces maisons CSS :

• animation-période
• animation-appel
• animation-report
• animation-direction
• mode de remplissage d'animation
• animation-itération-s'appuyer
• animation-play-nation
• Fonction de synchronisation d'animation

Deux valeurs, une pour la période d'animation et une pour l'appel d'animation, sont requises. En plus de cela, l'ordre des valeurs détermine quel prix est attribué à quel objet d'animation.

Des valeurs mal alignées devraient entraîner une animation se comportant différemment de ce à quoi vous vous attendiez. Donc, si l'utilisation du raccourci d'animation appartient, assurez-vous que ses valeurs sont indexées dans le bon ordre.

Performances lentes

Les animations CSS ont tendance à être plus performantes que les différentes sortes d'animations Internet. Cependant, maintenant toutes les animations CSS ne sont plus égales, et quelques modèles animés réduiront progressivement les performances globales plus que d'autres.

La plupart des animations CSS simples n'ont tout simplement pas d'effet majeur sur les temps de chargement des pages Web. Cependant, plus vous téléchargez de résultats dans votre animation, plus vous risquez de rencontrer des problèmes de performances globales.

Pour éviter de mauvaises performances globales, Google recommande de limiter votre utilisation des animations qui provoquent des repeints. Une peinture est le navigateur qui crée l'image visible d'un pixel de page Web à l'aide d'un pixel à l'écran. Les peintures utilisent une quantité considérable de puissance de traitement, vous devez donc limiter autant que possible la grande variété de repeints à cause des animations.

Malheureusement, les maisons CSS animables au maximum provoquent une repeinture lorsqu'elles sont modifiées. Les exceptions à cette transformation (pour des éléments tels que l'échelle, la rotation et la position) et l'opacité, qui peuvent être dynamiques avec un impact minimal sur les performances globales. Voici une référence pour laquelle les maisons CSS provoquent des repaints tout en étant vivantes.

Néanmoins, ne laissez pas cela vous dissuader de supprimer complètement les animations. Si vous rencontrez des problèmes de rythme, cela est probablement dû au fait que vous cherchez à en exécuter plusieurs immédiatement ou à utiliser l'animation pour au moins un détail massif ou une organisation d'éléments.

Sur les sites Web, les animations CSS sont de premier ordre alors qu'elles sont utilisées subtilement pour embellir l'expérience, alors rappelez-vous si vous voulez ou non une animation complexe pour interagir avec les visiteurs.

Le dernier mot

Oui, HubSpot vous permet de contrôler la direction des animations en utilisant le bon code CSS. Bien! Je suis tout à fait d'accord que la propriété de direction d'animation CSS est une chose dont beaucoup de gens ne sont pas conscients.

Mais oui, après avoir lu ce blog, vous serez sûrement familiarisé avec les façons dont vous pouvez contrôler les animations et donner un aspect attrayant et convivial à la conception de votre site Web. Alors qu'est-ce que tu attends? Préparez-vous à créer un design qui plaira à votre public cible.

Encore besoin d'aide pour la conception d'un site, n'hésitez pas à nous contacter. Nos experts vous aideront avec la même chose.

Editeur : Divya