How to overcome Animate.css glitch in Chrome?

Question

css

I do everything as in the instructions in the library. I set the effect of leaving the text from the side.

.animated {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

...addClass('animated fadeInRight');
In Firefox, everything works, but in Chrome, some sections of the text have the following effect:

As you can see, the text does not disappear, but another text that appears smoothly appears on it. The same goes for headings with a left-hand effect.
But the list at the bottom of the picture is animated correctly.

Answer 1

Can't figure it out without jsfiddle

Answer 2

Try deleting existing classes and adding new ones and in CSS prescribe to all browsers
-webkit-
-moz-
-ms-
-o-

$(div).removeClass('class').addClass('animated fadeInRight');