opacity from 0 to 1 animation not working on firefox

as title says, this kind of animation not working on ff.

I am running this animation through js after few seconds by document.getElementById('my_id').style.webkitAnimationPlayState = "running";
(style.animationPlayState <- also tested).

In the same file, changing background-color animation animation works perfectly.
My conclusion is, there is something wrong with opacity on firefox??

#op_animation {opacity: 0; animation: animation 1s; animation-fill-mode: forwards; animation-play-state: paused; -webkit-animation: animation 1ss; -webkit-animation-fill-mode: forwards; -webkit-animation-play-state: paused;-moz-animation: animation 1s; -moz-animation-fill-mode: forwards; -moz-animation-play-state: paused;}
@keyframes animation {
0%   {opacity: 0; }
50%   {opacity: 1;}
100% {opacity: 0.2;}

^ css from element I want animate


Source: stackoverflow-javascript

CSS rotation by 360 degrees

I want to rotate a rectangle by an angle of 360 degrees (or even > 360 degrees) using CSS. The center of the rotation is “right center”. If I use the following CSS code for a rotation by 180 degrees (and trigger the rotation with JavaScript) it works fine:

@keyframes rotation {
  from {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    opacity: 1;
    -webkit-animation-timing-function: linear;
  }

to {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
    opacity: 1;
    -webkit-animation-timing-function: linear;
  }
}

.rotation {
  animation-name: rotation;
}

However, if I replace the 180 degrees by an angle >= 360 degrees it won’t work anymore. For example in the case of 360 degrees nothing happens because the starting position is equal to the end position of the rotation.

How can I implement rotations by 360 degrees or more?


Source: stackoverflow-javascript