I want to make it so that when scrolling down my animation worked for this I write the following

<script> new WOW().init(); </script> <div class="wow div1" data-wow-offset="200"></div> <style> .div1 { width: 100px; height: 100px; background-color: red; -webkit-animation-name: example; -webkit-animation-duration: 8s; animation-name: example; animation-duration: 8s; animation-delay: 3s; } @-webkit-keyframes example { 0% { background-color: red; } 25% { background-color: yellow; } 50% { background-color: blue; } 100% { background-color: green; } } </style>

but for some reason it doesn't work, what can it be?

  • declare new WOW().init(); before the closing body tag - user33274

1 answer 1

here is the link to the codepan link everything works

added these lines

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"> </script>