animate.css is loading double time in firefox and chrome

Question

Hi Anyone please help me on this in my page i used fadeInUp css from animate.css file. when i open in firefox it is loading double time.

This is css i used.

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
     transform: none;
  }
}

@-moz-keyframes fadeInUp {
  from {
    opacity: 0;

    -moz-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -moz-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
     -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -ms-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

some times i am getting same error in chrome also

score 0 · Answer 1 · answered Mar 21 '16 at 14:58

0

you have set it up 2 times.

As far as code in @keyframes fadeInUp has all browsers support, you don't need: @-moz-keyframes fadeInUp {...} and @-webkit-keyframes fadeInUp {...}

answered Mar 21 '16 at 14:58

Oliver White

615
6
16

I tried this too. Again same problem. I added the facebook plugin for my wordpress site. Is that will affect the animation in any way?? – Sivasankar Tr Mar 22 '16 at 05:12
What is the relevance from this css to fb plugin?oo – Oliver White Mar 22 '16 at 05:46
I dont know after i removed the plugin it is working fine. The plugin is OLARK. May be because of this it is loading twice?? – Sivasankar Tr Mar 22 '16 at 05:50
Not sure, so right now you are using my suggestion or not? – Oliver White Mar 22 '16 at 06:07
Yes i removed as you suggested. Still problem is exists. – Sivasankar Tr Mar 22 '16 at 06:11
without any further examples and links I can't figure out where the problem – Oliver White Mar 22 '16 at 08:54
Thanks Oliver White for your support. Finally i found the solution. .wow { visibility: hidden; }. This is the class i added in the header. Problem is solved. Thanks for your support once again. – Sivasankar Tr Mar 23 '16 at 09:05

animate.css is loading double time in firefox and chrome

1 Answers1