Partage
  • Partager sur Facebook
  • Partager sur Twitter

animation keyframe au clic

JoeVan
    21 septembre 2023 à 8:44:23

    bonjour, j'ai fais une animation css en keyframe et je souhaite lancer l'animation au clic. J'ai essayer de mettre le keyframe dans une balise active mais ça ne fonctionne pas, des idées?
    • Partager sur Facebook
    • Partager sur Twitter
    AbcAbc6
    JoeVan
      21 septembre 2023 à 11:25:27

      Je dois le faire uniquement en css

      as tu un exemple d'utilisation avec un keyframe? ^^

      • Partager sur Facebook
      • Partager sur Twitter
      AbcAbc6
        21 septembre 2023 à 12:01:44

        Voici un exemple vite fait :

        <!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de CSS avec keyframe et :target </title>
    <style>
        .block {
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }

        .block:target {
            animation-duration: 3s;
            animation-name: mon_animation;
        }

        @keyframes mon_animation {
            from {
                width: 100px;
            }

            to {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <p  ><a href="#block">Clique moi</a></p>
    <div id="block" class="block"></div>
</body>

</html>



        • Partager sur Facebook
        • Partager sur Twitter

        animation keyframe au clic

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur ●
        • Markdown