Why CSS animation go smooth only if i am moving mouse pointer? - css

Question

Why, when i moving mouse pointer animation seems to be all-fluent, but if i am not, it is fluent partially (to the half of duration, precisely).
Example (with mouse moving):
Example without moving mouse:
It seems that it waits for end of the animation, and then the picture is showed.
The code which i am working on i present below:
<div class="flip-container-off">
<div class="flipper">
<div class="front">
<div class="image">
<img id="login_image" src="{{ baseUrl }}public/images/login_page/login.png">
</div>
<img id="car1" src="{{ baseUrl }}public/images/login_page/car.png">
<img class="cloud-animation" src="{{ baseUrl }}public/images/login_page/cloud.png">
</div>
<div class="back">
<div class="image">
<img id="login_image" src="{{ baseUrl }}public/images/login_page/payment_required_logo.png">
</div>
<img class="cloud-animation" src="{{ baseUrl }}public/images/login_page/cloud.png">
</div>
</div>
</div>
And the css for it:
.flip-container-on .flipper, .flip-container-on .flipper {
-webkit-transition-delay: 1.5s;
transform: rotateY(180deg);
}
.flip-container-on, .front, .back {
width: 320px;
}
/* flip speed goes here */
.flipper {
transition: 2s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
-webkit-transform:rotateY(0deg);
-moz-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
transform:rotateY(0deg);
}
/* back, initially hidden pane */
.back {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}
And a bit of JQuery:
$(function () {
setTimeout(function () {
$('.flip-container-off').addClass('flip-container-on');
$('.flip-container-off').removeClass('flip-container-off');
},1000);
});
Fiddle:
https://jsfiddle.net/fk2xt8a9/
###################################
EDIT:
I have found the problem, I have got the cloud animation, and this animation interfere with flip animation in some way.
Example:
Code for that cloud i present below:
#media (min-width: 820px) {
.cloud-animation {
display: initial;
left: 52px;
position: absolute;
top: 101px;
animation: animationFrames linear 90s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
-webkit-animation: animationFrames linear 90s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
-moz-animation: animationFrames linear 90s;
-moz-animation-iteration-count: infinite;
-moz-transform-origin: 50% 50%;
-o-animation: animationFrames linear 90s;
-o-animation-iteration-count: infinite;
-o-transform-origin: 50% 50%;
-ms-animation: animationFrames linear 90s;
-ms-animation-iteration-count: infinite;
-ms-transform-origin: 50% 50%;
-webkit-transition-delay: 2s;
transform: rotateY(180deg);
}
}
#keyframes animationFrames {
0% {
transform: translate(0px, 0px);
}
50% {
transform: translate(400px, 0px);
}
100% {
transform: translate(0px, 0px);
}
}
#-moz-keyframes animationFrames {
0% {
-moz-transform: translate(0px, 0px);
}
50% {
-moz-transform: translate(400px, 0px);
}
100% {
-moz-transform: translate(0px, 0px);
}
}
#-webkit-keyframes animationFrames {
0% {
-webkit-transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(400px, 0px);
}
100% {
-webkit-transform: translate(0px, 0px);
}
}
#-o-keyframes animationFrames {
0% {
-o-transform: translate(0px, 0px);
}
50% {
-o-transform: translate(400px, 0px);
}
100% {
-o-transform: translate(0px, 0px);
}
}
#-ms-keyframes animationFrames {
0% {
-ms-transform: translate(0px, 0px);
}
50% {
-ms-transform: translate(400px, 0px);
}
100% {
-ms-transform: translate(0px, 0px);
}
}
I don't have any idea why it is interfering, but is someone has some idea, i would appreciate it :)
Updated Fiddle: https://jsfiddle.net/fk2xt8a9/1/
(Please run that by run button, place cursor on the html editor and don't move please, because only then the problem occurs)
###################################
POSSIBLE WORKAROUND:
I have improved my code and solved my problem using Jquery:
I put .cloud-animation-off instead of .cloud-animation class
I made setTimeout inside previous setTimeout to exchange these classes to run my animation during flip animation
that caused no interference in both animations :)
Preview:
Example fiddle: https://jsfiddle.net/fk2xt8a9/2/