{"id":251709,"date":"2023-08-13T09:06:00","date_gmt":"2023-08-13T06:06:00","guid":{"rendered":"https:\/\/inform.click\/donnez-vie-a-vos-pages-web-avec-des-animations-et-des-transitions-css\/"},"modified":"2023-08-13T09:38:00","modified_gmt":"2023-08-13T06:38:00","slug":"donnez-vie-a-vos-pages-web-avec-des-animations-et-des-transitions-css","status":"publish","type":"post","link":"https:\/\/inform.click\/fr\/donnez-vie-a-vos-pages-web-avec-des-animations-et-des-transitions-css\/","title":{"rendered":"Donnez vie \u00e0 vos pages Web avec des animations et des transitions CSS"},"content":{"rendered":"

\n Les conceptions de sites Web \u00e9voluent constamment. Qu’il s’agisse d’un design r\u00e9actif, d’une belle typographie, de sch\u00e9mas de codage de couleurs parfaits, d’illustrations, les cr\u00e9ateurs de sites Web proposent chaque jour de nouvelles id\u00e9es et de nouveaux designs.\n<\/p>\n

\n De nos jours, les utilisateurs attendent beaucoup des interfaces utilisateur en raison du contenu de haute qualit\u00e9 disponible sur Internet. Au fur et \u00e0 mesure que les interfaces du site Web \u00e9voluent, la technologie sous-jacente \u00e9volue \u00e9galement. CSS<\/strong> est l’un des principaux composants responsables de l’am\u00e9lioration de l’interface du site Web .\n<\/p>\n

\n Les feuilles de style CSS ou Cascading sont charg\u00e9es de rendre les sites beaucoup plus interactifs en d\u00e9finissant leur style, leur mise en page, leurs conceptions. La derni\u00e8re norme CSS, c’est-\u00e0-dire CSS3, a introduit le concept d’ animations<\/strong> et de transformations<\/strong> qui am\u00e9liorent l’exp\u00e9rience utilisateur en ajoutant une profondeur suppl\u00e9mentaire \u00e0 l’interface utilisateur. Avec les animations et les transitions CSS, vous pouvez raconter des histoires, cr\u00e9er des effets somptueux et rendre l’interaction de l’utilisateur avec votre site Web beaucoup plus efficace et significative.\n<\/p>\n

\n Une animation n’est qu’une simulation de mouvement qui est cr\u00e9\u00e9e en affichant une s\u00e9rie d’objets comme des images l’un apr\u00e8s l’autre. La transition, en revanche, est essentiellement un processus dans lequel un objet passe d’un \u00e9tat \u00e0 un autre. Mais, lorsque nous parlons d’animations Web, il existe essentiellement trois types – les animations CSS<\/strong> ou les animations d’images cl\u00e9s, les transitions CSS<\/strong> et les animations JavaScript<\/strong>.\n<\/p>\n

\n Animation CSS\n<\/p>\n

\n Pour cr\u00e9er des animations en CSS, nous devons modifier les propri\u00e9t\u00e9s CSS d’un \u00e9l\u00e9ment tel qu’une image ou un texte, pendant une certaine p\u00e9riode de temps. Nous pouvons modifier les propri\u00e9t\u00e9s des \u00e9l\u00e9ments autant de fois que nous le souhaitons et pouvons \u00e9galement d\u00e9finir la dur\u00e9e de l’animation.\n<\/p>\n

\n Sp\u00e9cifier @keyframes
\n<\/h5>\n

\n Les animations CSS sont d\u00e9finies peu avec des images cl\u00e9s. Ces images cl\u00e9s sont les points interm\u00e9diaires de l’animation. Toutes les animations CSS sont sp\u00e9cifi\u00e9es sous la r\u00e8gle @keyframes. Ces images cl\u00e9s sp\u00e9cifient ce qui arrive \u00e0 l’\u00e9l\u00e9ment \u00e0 un moment donn\u00e9, c’est-\u00e0-dire\n<\/p>\n

    \n
  • quelles propri\u00e9t\u00e9s changent\n <\/li>\n
  • lorsque l’\u00e9l\u00e9ment s’anime\n <\/li>\n
  • comment l’\u00e9l\u00e9ment s’anime\n <\/li>\n<\/ul>\n

    \n Vous pouvez d\u00e9finir votre propre image cl\u00e9 comme :\n<\/p>\n

    @keyframes animation_name\n{\nfrom{ property: value; }\nto{ property: value; }\n}<\/code><\/pre>\n
    \n  Ici, ‘to’ et ‘from’ sp\u00e9cifient le d\u00e9but et la fin de l’animation. Nous pouvons \u00e9galement sp\u00e9cifier des animations pour les moments interm\u00e9diaires entre le d\u00e9but et la fin comme ceci :\n<\/p>\n
    @keyframes name\n{\n0%{ property: value; }\n50%{ property: value; }\n100%{ property: value; }\n}<\/code><\/pre>\n
    \n  Ici, 0 % repr\u00e9sente le d\u00e9but de l’animation, 100 % repr\u00e9sente la fin de l’animation et 50 % signifie le changement entre le d\u00e9but et la fin. Mais comment dire au navigateur pendant combien de temps l’animation doit avoir lieu ? Nous le faisons \u00e0 l’aide de certaines propri\u00e9t\u00e9s d’animation<\/strong>. Ces propri\u00e9t\u00e9s d’animation sont associ\u00e9es \u00e0 l’\u00e9l\u00e9ment \u00e0 animer. Par exemple:\n<\/p>\n
    element_name\n{\nanimation_property: value;\nstyle_property: value;\n}<\/code><\/pre>\n
    \n  Ici, l’\u00e9l\u00e9ment peut \u00eatre n’importe quelle balise HTML telle que div, span, img, p etc. et style_property<\/code>est n’importe quelle propri\u00e9t\u00e9 de style CSS comme background_color, width, height etc. Examinons maintenant certaines propri\u00e9t\u00e9s d’animation en d\u00e9tail.\n<\/p>\n
      \n
    1. \n    @keyframes<\/strong>: Les images cl\u00e9s sont utilis\u00e9es pour sp\u00e9cifier le code d’animation comme indiqu\u00e9 ci-dessus.\n  <\/li>\n
    2. \n    animation-name<\/strong>: Le nom sp\u00e9cifi\u00e9 avec @keyframes est le nom de l’animation. Ce nom est utilis\u00e9 pour r\u00e9f\u00e9rencer les images cl\u00e9s avec l’\u00e9l\u00e9ment \u00e0 animer.\n  <\/li>\n
    3. \n    animation-duration<\/strong>: Il est utilis\u00e9 pour sp\u00e9cifier la dur\u00e9e de l’animation en secondes ou millisecondes. Par exemple, si nous le fixons \u00e0 5 secondes, l’animation ne durera que 5 secondes. Si nous ne d\u00e9finissons pas cette propri\u00e9t\u00e9, l’animation ne fonctionnera pas du tout car sa valeur par d\u00e9faut est 0.\n  <\/li>\n
    4. \n    animation-delay<\/strong>: nous pouvons retarder le d\u00e9but de l’animation en sp\u00e9cifiant le d\u00e9lai d’animation. Par exemple, si vous souhaitez d\u00e9marrer l’animation 5 secondes apr\u00e8s le chargement de la page dans le navigateur, d\u00e9finissez simplement animation-delay sur 5s.\n  <\/li>\n
    5. \n    animation-direction<\/strong>: nous pouvons indiquer au navigateur si une animation se d\u00e9place dans le sens inverse ou alterne les cycles avec cette propri\u00e9t\u00e9. Par exemple, si vous souhaitez que l’animation s’ex\u00e9cute du d\u00e9but \u00e0 la fin, d\u00e9finissez la valeur de animation-duration sur \u00ab\u00a0normal\u00a0\u00bb. Si vous voulez qu’il s’ex\u00e9cute de la fin au d\u00e9but, d\u00e9finissez simplement la valeur sur \u00ab\u00a0inverser\u00a0\u00bb.\n  <\/li>\n
    6. \n    animation-fill-mode<\/strong>: Nous pouvons sp\u00e9cifier le style de l’\u00e9l\u00e9ment lorsque l’animation ne joue pas avec ce mode, c’est-\u00e0-dire lorsque l’animation est retard\u00e9e ou termin\u00e9e, alors quel devrait \u00eatre le style de l’\u00e9l\u00e9ment.\n  <\/li>\n
    7. \n    animation-iteration-count<\/strong>: Le nombre de fois qu’une animation peut \u00eatre lue est repr\u00e9sent\u00e9 par cette propri\u00e9t\u00e9. Par exemple, si vous voulez lire l’animation une fois, r\u00e9glez-la sur 1, ou si vous voulez que l’animation soit jou\u00e9e ind\u00e9finiment, r\u00e9glez-la simplement sur \u00ab\u00a0infinie\u00a0\u00bb.\n  <\/li>\n
    8. \n    animation-timing-function<\/strong>: Cette propri\u00e9t\u00e9 est utilis\u00e9e pour sp\u00e9cifier la courbe de vitesse de l’animation comme lin\u00e9aire, acc\u00e9l\u00e9ration ou d\u00e9c\u00e9l\u00e9ration.\n  <\/li>\n
    9. \n    Animation<\/strong>: C’est la propri\u00e9t\u00e9 abr\u00e9g\u00e9e pour d\u00e9finir toutes les propri\u00e9t\u00e9s d’animation.\n  <\/li>\n<\/ol>\n
      \n  Par exemple, vous pouvez animer un objet rebondissant avec l’extrait de code suivant. Remarquez comment la notation abr\u00e9g\u00e9e pour l’animation a \u00e9t\u00e9 utilis\u00e9e ici.\n<\/p>\n
      @keyframes slide {\n 0% {\n  left: 0;\n  top: 0;\n }\n 50% {\n  left: 244px;\n  top: 100px;\n }\n 100% {\n  left: 488px;\n  top: 0;\n }\n}\n \n.stage:hover .object {\n animation: slide 2s linear;    \/*shorthand animation property*\/\n}\n \n.object {\n background: #2db34a;\n border-radius: 50%;\n height: 50px;\n position: absolute;\n width: 50px;\n}<\/code><\/pre>\n
      \n  Transitions
      \n<\/h3>\n
      \n  Les transitions CSS sont appliqu\u00e9es aux propri\u00e9t\u00e9s des \u00e9l\u00e9ments pendant une certaine dur\u00e9e en fonction de certaines fonctions de synchronisation<\/strong>, \u00e9galement appel\u00e9es fonctions d’acc\u00e9l\u00e9ration. Par fonction de synchronisation, nous entendons une fonction qui va changer les propri\u00e9t\u00e9s des \u00e9l\u00e9ments d’un \u00e9tat \u00e0 un autre comme la progression lin\u00e9aire, l’acc\u00e9l\u00e9ration ou la d\u00e9c\u00e9l\u00e9ration. Vous avez peut-\u00eatre remarqu\u00e9 qu’une image glisse ou se transforme en une autre image au survol ou qu’un son joue au clic de la souris. Ce sont tous des effets de transition qui peuvent rendre un site Web interactif.\n<\/p>\n
      \n  Les fonctions d’acc\u00e9l\u00e9ration<\/strong> sont importantes pour cr\u00e9er des transitions. Ils pr\u00e9cisent comment les propri\u00e9t\u00e9s vont changer. Ils peuvent \u00e9galement modifier la vitesse \u00e0 laquelle la valeur des propri\u00e9t\u00e9s change du point de d\u00e9part au point final d’une transition. Vous pouvez appliquer des transitions de la mani\u00e8re suivante :\n<\/p>\n
      element\n{\nstyle_property: value;\ntransition_property: value;\n}<\/code><\/pre>\n
      \n  Ici, l’\u00e9l\u00e9ment sp\u00e9cifie l’\u00e9l\u00e9ment HTML que vous souhaitez transformer comme div, H1, img, etc. style_property est le style CSS appliqu\u00e9 \u00e0 cet \u00e9l\u00e9ment. Voyons maintenant quelques propri\u00e9t\u00e9s de transition<\/strong> :\n<\/p>\n