javascript – why is my @keyframes not playing when i paste it to my main site


oh boy here we are again

so i made a separate codepen (not my actual project) with an anim in it but when i paste it into my actual website it doesnt work and just flops around on the bottom of my page like a fish out of water and i have no idea why this does not work please help me
here’s the code for the codepen with the anim

<html>
<head>
    <meta charset="utf-8">
    <title>Sushi</title>
</head>
<body>
    <style type="text/css">
        body{
            overflow: hidden;
        }
        #sushi{
            position: absolute;
            left: 0;
            visibility: visible;
        }
        #sushi.active{
            animation: mymove 3s infinite linear;
        }

        @keyframes mymove{
            0%{
                left: -15;
                visibility: visible;
            }
            25%{
                left: 25%;
                visibility: visible;
            }
            50%{
                left: 50%;
                visibility: visible;
            }
            75%{
                left: 75%;
                visibility: visible;
            }
  
            94%{
                visibility: hidden;
                left: 100%
          }
            95%{
                left: -10%;
                visibility: hidden;
            }
          100%{
            left: 0%;
            visibility: visible;
          }
        }


    </style>
    <div id="sushi"><img src="https://media.giphy.com/media/4YzoaFKXaGHbpkOnV3/giphy.gif"></div>
    <script type="text/javascript">
        sushi = document.getElementById('sushi');

        sushi.addEventListener('click', function(){
            sushi.classList.add('active');
        });
    </script>
 <h1><blink> CLICK ME!!! </h1>
   </body>
 
</html>



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here