CSS animation not working properly in wow js

Question

I included wow.js for my project, and I ran into an animation problem.

The animation class that I used to animate divs only works if I insert the css class from animate.css into my page as an inline style sheet and also show the div even if I give a delay in the data, delay = "5s "and the animation works correctly after 5 seconds. Plz help me if anyone knows why this is happening.

Here is my code ..

HTML:

<div class="cssAnimation hidediv"> <div class="dial1 wow slideInLeft " data-wow-duration="2s" data-wow-delay="5s"> Anmation goes here 1 </div> </div> 

CSS:

  <style type="text/css"> .dial1{ width:200px; height: 100px; display: block; position: absolute; background: #000; color:#fff; padding: 10px; right: 0; z-index: 9999; } .dial2{ width:200px; height: 100px; display: block; position: absolute; background: #000; color:#fff; padding: 10px; right: 210px; } .hidediv{ -webkit-animation: hide 2s forwards; -webkit-animation-iteration-count: 1; -webkit-animation-delay: 5s; animation: hide 2s forwards; animation-iteration-count: 1; animation-delay: 5s; } @-webkit-keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; visibility:hidden; display: none; } } @keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; visibility:hidden; display: none; } } .cssAnimation{ width:600px; height: 300px; position: absolute; /* display: none; */ z-index: 9999; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } </style> 

Answer 1

Your css should include the .animated class from animate.css, like the one that Wow.js will add (unless you specify a different selector) when the item is in view, causing the animation.