Why does CSS animation in Ie11 only work once?

Question

css

I noticed a bug in IE11 in terms of handling the "animation" property - when there are several animations separated by commas in the animation - ie only processes both the first time, and starting from the second access - only the first animation from the list is performed.
example:
jsbin.com/bizebaj/1/edit?html,css,js,output
second focus is transparency. in ie it only works on the first block once.
Is this bug known, how can I overcome it?

Answer 1

Why it works is not clear, but you can solve it by combining the animation rules into one, for example like this :

@keyframes paralax-animation {
  0%      {
    opacity: 0.2;
      transform: translateX(0px);
    }
  20%,80% {opacity: 0.8;}
  100%    {
    opacity: 0.2;
      transform: translateX(100px);
    }
}

Or using modernizr and solving the issue through js.