{"id":5387,"date":"2024-08-27T17:45:30","date_gmt":"2024-08-27T17:45:30","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/animations-css-techniques-astuces\/"},"modified":"2024-11-13T16:21:47","modified_gmt":"2024-11-13T16:21:47","slug":"animations-css-techniques-astuces","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/animations-css-techniques-astuces\/","title":{"rendered":"6.5 Animations en CSS : Techniques et Astuces"},"content":{"rendered":"\n\n\n<p><strong>Les Animations en CSS<\/strong> jouent un r\u00f4le essentiel dans l&rsquo;am\u00e9lioration de l&rsquo;interactivit\u00e9 et de l&rsquo;engagement utilisateur sur les sites web. Comprendre comment mettre en \u0153uvre des animations en CSS peut grandement enrichir l&rsquo;exp\u00e9rience visuelle sur votre site. Explorez avec nous les techniques et astuces pour ma\u00eetriser les <strong>animations en CSS<\/strong> gr\u00e2ce \u00e0 des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Animations en CSS<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586640759?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Les animations en CSS permettent de donner vie \u00e0 vos pages web en ajoutant des transitions visuelles fluides et engageantes. Gr\u00e2ce aux propri\u00e9t\u00e9s <code>transition<\/code> et <code>animation<\/code> de CSS, vous pouvez cr\u00e9er des effets dynamiques et attractifs sans avoir \u00e0 utiliser JavaScript. Apprenez comment utiliser ces propri\u00e9t\u00e9s de mani\u00e8re efficace pour enrichir vos interfaces utilisateur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Transitions en CSS<\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>transition<\/code> de CSS permet de modifier progressivement les valeurs des propri\u00e9t\u00e9s CSS d&rsquo;un \u00e9l\u00e9ment sur une dur\u00e9e d\u00e9finie. Commen\u00e7ons par un exemple simple o\u00f9 nous allons animer la couleur et la taille d&rsquo;un bouton lors du survol :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>button {\n  background-color: #e74c3c;\n  color: white;\n  padding: 10px 20px;\n  font-size: 16px;\n  border: none;\n  border-radius: 5px;\n  transition: background-color 0.3s ease, transform 0.3s ease;\n}\n\nbutton:hover {\n  background-color: #c0392b;\n  transform: scale(1.1);\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les Animations en CSS<\/h3>\n\n\n\n<p>Les animations en CSS offrent une plus grande flexibilit\u00e9 et peuvent impliquer des changements complexes d&rsquo;\u00e9tat \u00e0 l&rsquo;aide de @keyframes. Par exemple, une animation classique de rotation d&rsquo;un \u00e9l\u00e9ment peut \u00eatre d\u00e9finie ainsi :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.rotate-animation {\n  animation: rotate 2s infinite linear;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Effets d&rsquo;Entr\u00e9e et de Sortie<\/h3>\n\n\n\n<p>Les effets d&rsquo;entr\u00e9e et de sortie (ease-in, ease-out) contribuent \u00e0 rendre les animations plus naturelles. Par exemple, une animation d&rsquo;un bouton qui apparait avec un effet d&rsquo;entr\u00e9e peut \u00eatre r\u00e9alis\u00e9e comme suit :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.fade-in {\n  animation: fadeIn 1s ease-in;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner les Animations pour des Effets Complexes<\/h3>\n\n\n\n<p>Les animations peuvent \u00eatre combin\u00e9es pour cr\u00e9er des effets complexes et immersifs. Par exemple, nous pouvons combiner une animation de glissement et de rotation pour animer un menu de navigation :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@keyframes slideIn {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes rotateIn {\n  from {\n    transform: rotate(-90deg);\n  }\n  to {\n    transform: rotate(0deg);\n  }\n}\n\n.menu-item {\n  animation: slideIn 0.5s ease-out, rotateIn 0.5s ease-out;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Animations CSS pour le Feedback Utilisateur<\/h3>\n\n\n\n<p>Les animations peuvent \u00e9galement \u00eatre utilis\u00e9es pour fournir un retour visuel aux utilisateurs. Par exemple, un formulaire peut afficher une animation de secousse en cas d\u2019erreur de soumission :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@keyframes shake {\n  0%, 100% {\n    transform: translateX(0);\n  }\n  20%, 60% {\n    transform: translateX(-10px);\n  }\n  40%, 80% {\n    transform: translateX(10px);\n  }\n}\n\n.error {\n  animation: shake 0.5s;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Animations CSS Avanc\u00e9es avec JavaScript<\/h3>\n\n\n\n<p>Pour un contr\u00f4le encore plus pr\u00e9cis des animations, vous pouvez utiliser des combinaisons de CSS et JavaScript. Par exemple, d\u00e9clencher des animations sur des \u00e9v\u00e9nements sp\u00e9cifiques :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;button id=\"startAnimation\"&gt;Start Animation&lt;\/button&gt;\n&lt;div id=\"animatedElement\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.getElementById('startAnimation').addEventListener('click', () =&gt; {\n  const element = document.getElementById('animatedElement');\n  element.classList.add('rotate-animation');\n});<\/code><\/pre>\n\n\n\n<p>Avec les techniques et astuces pr\u00e9sent\u00e9es, vous pouvez enrichir vos sites web et applications en rendant l&rsquo;interaction utilisateur plus intuitive et agr\u00e9able. Continuez \u00e0 explorer les possibilit\u00e9s offertes par les <strong>animations en CSS<\/strong> pour cr\u00e9er des exp\u00e9riences uniques et m\u00e9morables.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>animations en CSS<\/strong> sont des outils puissants pour am\u00e9liorer visuellement vos pages web et rendre vos interfaces plus interactives et engageantes. En ma\u00eetrisant les propri\u00e9t\u00e9s de <code>transition<\/code> et <code>animation<\/code>, ainsi que l&rsquo;utilisation des @keyframes, vous pouvez cr\u00e9er des effets sophistiqu\u00e9s et dynamiques. Continuez \u00e0 exp\u00e9rimenter et \u00e0 int\u00e9grer des animations dans vos projets pour offrir une exp\u00e9rience utilisateur enrichissante. Pour en savoir plus sur les techniques avanc\u00e9es en CSS, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-avanc%C3%A9\/142\">cours avanc\u00e9 sur CSS<\/a> et d\u00e9couvrez nos autres <a href=\"https:\/\/wikiform.fr\/blog\/\">tutoriels sur le blog<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\"><\/a>\n\n\n\n<h2 class=\"wp-block-heading\">Les Applications Pratiques des Animations en CSS<\/h2>\n\n\n\n<p><p>Les <a href=\"https:\/\/wikiform.fr\/codespace\/animations-css-techniques-astuces\" target=\"_blank\" rel=\"noopener\">animations en CSS<\/a> se pr\u00eatent \u00e0 de nombreuses applications pratiques qui enrichissent l&rsquo;exp\u00e9rience utilisateur. Elles peuvent par exemple \u00eatre utilis\u00e9es pour :<\/p>\n<ul>\n<li>Cr\u00e9er des boutons attrayants<\/li>\n<li>Ajouter des effets de survol aux liens<\/li>\n<li>Introduire des \u00e9l\u00e9ments avec des animations d&rsquo;entr\u00e9e<\/li>\n<li>Fournir un retour visuel en cas d&rsquo;interaction<\/li>\n<li>Am\u00e9liorer les transitions entre les diff\u00e9rentes sections d&rsquo;une page<\/li>\n<\/ul><\/p>\n\n\n\n<p>En combinant les \u00ab <a href=\"https:\/\/wikiform.fr\/codespace\/animations-css-techniques-astuces\" target=\"_blank\" rel=\"noopener\">transitions et animations CSS<\/a> \u00bb avec des frameworks tels que <a href=\"https:\/\/wikiform.fr\/codespace\/responsive-design-medias-queries-css\" target=\"_blank\" rel=\"noopener\">Media Queries CSS<\/a>, il est possible de cr\u00e9er des interfaces fluides et adaptatives. Par exemple, en utilisant des techniques avanc\u00e9es telles que la <a href=\"https:\/\/wikiform.fr\/codespace\/creation-layout-simple-medias-queries\" target=\"_blank\" rel=\"noopener\">cr\u00e9ation de layout simple<\/a>, on peut enrichir significativement l&rsquo;exp\u00e9rience utilisateur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">L&rsquo;Impact des Animations sur l&rsquo;Engagement Utilisateur<\/h3>\n\n\n\n<p><p>Les animations CSS jouent un r\u00f4le crucial dans le <a href=\"https:\/\/wikiform.fr\/codespace\/boites-css-bases-indispensables\" target=\"_blank\" rel=\"noopener\">design<\/a> et l&rsquo;engagement des utilisateurs. Bien mises en \u0153uvre, elles peuvent :<\/p>\n<ul>\n<li>Attirer l&rsquo;attention sur des \u00e9l\u00e9ments cl\u00e9s<\/li>\n<li>Guider les utilisateurs \u00e0 travers une <a href=\"https:\/\/wikiform.fr\/codespace\/positionner-elements-css-precisement\" target=\"_blank\" rel=\"noopener\">navigation intuitive<\/a><\/li>\n<li>Cr\u00e9er une exp\u00e9rience utilisateur plus immersive<\/li>\n<li>R\u00e9duire la frustration en donnant un retour visuel rapide<\/li>\n<\/ul><\/p>\n\n\n\n<p>Par exemple, lorsqu&rsquo;un utilisateur soumet un formulaire, une animation de succ\u00e8s ou d&rsquo;erreur peut indiquer clairement le r\u00e9sultat de l&rsquo;action. Les <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-inspecteur-html-deboguer\" target=\"_blank\" rel=\"noopener\">outils de d\u00e9bogage<\/a> tels que l&rsquo;inspecteur HTML peuvent \u00eatre tr\u00e8s utiles pour optimiser ces animations et s&rsquo;assurer qu&rsquo;elles fonctionnent correctement sur diff\u00e9rents appareils et navigateurs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Les Avantages des Animations CSS par Rapport au JavaScript<\/h2>\n\n\n\n<p><p>Bien que le JavaScript offre une grande flexibilit\u00e9, les animations CSS pr\u00e9sentent plusieurs avantages notables :<\/p>\n<ul>\n<li>Performance : Les animations CSS sont souvent plus performantes car elles peuvent \u00eatre g\u00e9r\u00e9es directement par le navigateur (notamment en utilisant le GPU).<\/li>\n<li>Simplicit\u00e9 : Moins de code et une syntaxe plus simple.<\/li>\n<li>Compatibilit\u00e9 : Fonctionnalit\u00e9 support\u00e9e par tous les navigateurs modernes.<\/li>\n<\/ul><\/p>\n\n\n\n<p>Par exemple, les effets de survol cr\u00e9\u00e9s avec CSS <code>transition<\/code> et <code>animation<\/code> peuvent \u00eatre tout aussi efficaces que ceux cr\u00e9\u00e9s avec JavaScript, mais en moins de lignes de code. Pour un approfondissement, vous pouvez consulter notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css3-de-d\n","protected":false},"excerpt":{"rendered":"<p>Les Animations en CSS jouent un r\u00f4le essentiel dans l&rsquo;am\u00e9lioration de l&rsquo;interactivit\u00e9 et de l&rsquo;engagement utilisateur sur les sites web. Comprendre comment mettre en \u0153uvre&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2702,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5387","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5387"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5387\/revisions"}],"predecessor-version":[{"id":6044,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5387\/revisions\/6044"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2702"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}