6

I have integrated the wow.js for my project and i have encountered a problem with animation.

The animation class which i used to animate the div is working only if i paste the css class from animate.css into my page as embedded style sheet and also the div is showing even if i give a delay in data-wow-delay="5s"and animation works properly after 5 sec. 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>
Raj
  • 879
  • 1
  • 10
  • 23
  • The animation class only working after you insert the classes as embedded css in `` tags suggests that you're not linking to the file correctly. As for the animation working only after five seconds (with the delay), this could be caused by many issues. – Defiant Feb 03 '16 at 08:44
  • Thanks for your reply.. :) When i locate the file using inspect element in browser and open it new tab the animate.css file is displayed. If the link to that location is not correct then it will not displayed in new tab right..? So i think its not with the issue with location or link.And for time delay :- if we give a time delay using data-wow-delay="5s" that div should appear after that delay time 5sec and execute the animation which is the normal case right.? but on page load itself the div is showing.Im using codeiginter framework and my css files were in header and script in footer.php – Raj Feb 03 '16 at 09:06
  • `hidediv` is not hidden when the page loads, according to the CSS. You could try adding the attribute `opacity: 0;` to it. – Defiant Feb 03 '16 at 09:17
  • I used hidediv class for hide a div after a particular time using css animation and it works fine. Its not about that class. I removed that class and issue remains same. What exactly i need is a userguide (like a tour) in my project. So i need to display some dialogue box and images with css animation and hide all that dialogue box after that. Thats why im using wow.js for animation and hidediv class for hide the div. I searched a lot and couldnt find an option for hide a div which animation is used thats why i used a parent div and class hidediv for hide a div. – Raj Feb 03 '16 at 09:44

1 Answers1

0

Your css needs to include the .animated class from animate.css, as that's what will be added by Wow.js (unless you specify another selector) when the element is in view, triggering your animations.

Seth Warburton
  • 2,234
  • 1
  • 16
  • 17