CSS3 Perspective () animation acting strange on fast mouse movement
Perspective Animation
I've been playing around with animation css
perspective()
. However, when testing in Chrome and Opera, I encountered some strange behavior.
Chrome and Opera act very oddly when they hover over quickly animation
. animation
runs on :hover
. Perhaps this is causing the behavior? How can I stop Chrome and Opera with this behavior.
Fiddle
I have reproduced the problem inside a fiddle. Just do as the red dot shows .
body {
text-align: center;
}
.container {
position: relative;
height: 200px;
width: 200px;
margin: 0 auto;
border: 2px solid red;
}
.perspective {
background: blue;
height: 200px;
width: 200px;
transition: transform .33s;
}
.perspective:hover {
transform: perspective( 800px ) rotateY(15deg);
}
.perspective p {
margin: 0;
color: #fff;
text-align: center;
line-height: 200px;
}
.mouse-helper {
position: absolute;
height: 90px;
width: 15px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.mouse-helper .animated {
background: red;
position: absolute;
bottom: 0px;
height: 15px;
width: 15px;
border-radius: 50%;
animation: up-down .29s infinite;
}
@keyframes up-down {
0% {bottom: 0;top: calc(100% - 15px);}
50% {top: 0;bottom: calc(100% - 15px);}
100% { bottom: 0;top: calc(100% - 15px); }
}
<h2>Move with you mouse over the box like the red DOT does.</h2>
<p>You will see that the `perspective` animation will act very wierd on Chrome and Opera. On firefox and IE it works fine.</p>
<p>NOTE: Don't do it over the red dot itself, do it near the dot or any other size of the shape.</p>
<div class="container">
<div style="overflow: hidden;">
<div class="perspective">
<p>TEXT</p>
</div>
</div>
<div class="mouse-helper">
<div class="animated"></div>
</div>
</div>
source to share
My guess, but this is just an assumption, is related to the answer in this thread , where some conversions are hardware accelerated and some are not, and this could cause the situation to get out of sync.
If you explicitly added transform: perspective(0px) rotateY(0deg);
to yours (not hover
ed) .perspective
this won't happen:
body {
text-align: center;
}
.container {
position: relative;
height: 200px;
width: 200px;
margin: 0 auto;
border: 2px solid red;
}
.perspective {
background: blue;
height: 200px;
width: 200px;
transition: transform .33s;
transform: perspective(0px) rotateY(0deg);
}
.perspective:hover {
transform: perspective( 800px ) rotateY(15deg);
}
.perspective p {
margin: 0;
color: #fff;
text-align: center;
line-height: 200px;
}
.mouse-helper {
position: absolute;
height: 90px;
width: 15px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.mouse-helper .animated {
background: red;
position: absolute;
bottom: 0px;
height: 15px;
width: 15px;
border-radius: 50%;
animation: up-down .29s infinite;
}
@keyframes up-down {
0% {bottom: 0;top: calc(100% - 15px);}
50% {top: 0;bottom: calc(100% - 15px);}
100% { bottom: 0;top: calc(100% - 15px); }
}
<h2>Move with you mouse over the box like the red DOT does.</h2>
<p>You will see that the `perspective` animation will act very wierd on Chrome and Opera. On firefox and IE it works fine.</p>
<p>NOTE: Don't do it over the red dot itself, do it near the dot or any other size of the shape.</p>
<div class="container">
<div style="overflow: hidden;">
<div class="perspective">
<p>TEXT</p>
</div>
</div>
<div class="mouse-helper">
<div class="animated"></div>
</div>
</div>
So, your fix; as for "why?", guess again: the Chromium issue linked above has this from Chromium dev:
Alternatively, we can output the broadcast animation back to the main thread in this case.
We already do this (at least in M33) for animations where keyframes refer to both accelerated and accelerated properties:
Perhaps the same is now true for transitions as well (issue from 2014), but since the non-hover state doesn't have any transformations, this logic won't work in your case.
source to share