I want to flip an image with a rotation animation when hovering over it (see the code below). When hovering over the image, it rotates around its x-axis for one second (and back when the mouse leaves the image).
The animation works as expected in Firefox and Safari. However, Chrome sometimes skips the animation and flips the image instantly. I don't know how to reliably reproduce the problem because it usually works a few times before the animation is skipped. I have recorded a video, so you can see what I mean: https://www.youtube.com/watch?v=bpgi46F_5RU
Is something wrong with this CSS? I first suspected that it's caused by the rotation angle but the same problem occurs even with other types of animations.
.flippable-container {
float: left;
perspective: 1000px;
}
.flippable {
transition: transform 1s;
}
.flippable-container:hover .flippable {
transform: rotateX(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="flippable-container">
<img class="flippable" src="http://lorempixel.com/200/200/food"/>
</div>
Edit: As commented by TylerH, it looks like a bug in Chrome. I see the same problem in this well-known tutorial by David Walsh: http://davidwalsh.name/css-flip. Video: https://www.youtube.com/watch?v=o_TViH4AmZ8. The issue must be related to mouse interaction because the 'Toggle Flip' button below the image works fine.
I have fixed this by putting a z-index and position:relative on all the flippable items. I have no idea why that would affect it but it seems to have done the job.
example: http://jsfiddle.net/L0duLu3c/2/
.flippable-container {
float: left;
perspective: 1000px;
}
.flippable {
transition: 0.6s;
z-index:10;
position:relative;
transform: rotateX(0deg);
}
.flippable-container:hover .flippable {
transform: rotateX(180deg);
z-index:20;
}
Related
I'm experiencing a weird phenomenon using Microsoft Edge (40.15063.674.0) / Microsoft EdgeHTML (15.15063) with the code below. As expected, when you hover over the black box with any browser, it smoothly scales the box to 1.25x its size over 0.5 seconds. The problem happens when a mouse is moving too fast across the box in Edge. What happens is that instead of scaling smoothly, the box jumps/snaps to the desired transformation and then back again. Let’s say a user was moving their mouse fast from one side of the screen to the other and “cutting across the lawn” so to speak across the surface of the box.
In fact, if I move too fast in other browsers, the box doesn't attempt to scale at all. It just stays small unless the mouse movement actually ends up stopping in that area. Even in Internet Explorer this works just fine with as fast as I can move the mouse pointer across it, but only in Edge do I find this behavior. I have to go relatively slow to prevent that jitter-like snap. It doesn't matter what the effect is either. It could be a "scale", a "translateY", etc. If the mouse is moving too fast across the ":hover" it's not smooth in Edge. Is this a known issue? Is there anything I could do to prevent this from happening?
<!DOCTYPE html>
<style>
.box {
background-color: #000;
cursor: pointer;
position: absolute;
left: 200px;
top: 200px;
height: 200px;
width: 200px;
transition: transform 0.5s;
transition-delay: 0.1s; <=== Added this to stop it from jumping
}
.box:hover {
transform: scale(1.25);
}
</style>
<div class="box"></div>
I've even tried replicating the effect using jQuery's ".hover" function to add the CSS attributes when the mouse enters and then take them away when the mouse leaves but to no avail. It behaves exactly the same way. The hover effect jumps/snaps if the mouse is moving too fast in Edge.
This should be a comment, but sub-50 rep here.
You might want to try adding translateZ() or use scale3d() directly, to enable hardware acceleration, and using transition-delay to delay the transition altogether when hovering for less than 100ms.
.box:hover {
transform: scale3d(1.25, 1.25, 1.25);
transition-delay: 0.1s;
}
/* or */
.box:hover {
transform: translateZ(0) scale(1.25);
transition-delay: 0.1s;
}
I am trying to apply a simple transform: rotateY(90deg) on an div but it's (the div) disappearing as a result, dev tools is not throwing any error on that line, any suggestions or anything I might be missing?
This happens because when you rotate something on the Y axis by 90 degrees it has spun so that it's essentially facing a different direction. In the below example I've added a transition to show how the element changes over time (hover over it):
figure {
background: red;
height: 100px;
transition: 1s;
width: 100px;
}
div:hover figure {
transform: rotateY(90deg);
}
<div>
<figure></figure>
</div>
As our viewport looks directly onto the element and features no depth, it appears that the element has disappeared altogether.
If we do add some depth, it's easier to visualise what's happening:
The cube on the left is our pre-transform cube and the cube on the right is our cube after it's had rotateY(90deg) applied to it. As we have no depth at all and we're looking at our element front on, we can't see anything when it gets rotated by 90 degrees.
I am using CSS to display some spinning coins as shown in this fiddle: http://jsfiddle.net/6gdrQ/1/
Some of the relevant code is as below:
.coin {
background-image: url("http://coins.thefuntimesguide.com/images/blogs/presidential-dollar-coin-reverse-statue-of-liberty-public-domain.png");
-moz-transform-style: preserve-3d;
[...]
}
.coin:before {
background-image: url("https://www.intnumis.com.au/images/product_gub257zcoy_201310GoldProofHoleyDollarDumpREV_medium.jpg");
-moz-transform: translateZ(-5px);
[...]
}
and I rotate with:
-moz-transform: rotateY(1080deg)
Opera, Safari and Chrome are working just fine, but Firefox always shows the coin:before image on top when the coin is not spinning. When it is spinning everything works fine, but maybe 1s after the animation stops, it seems the div re-renders and for any rotated coins instead of seeing the before image, the back of the other image is shown.
I'd be grateful for any help or suggestions.
Answering my own question instead of deleting it incase anyone has a similar problem.
I need to add a perspective unit, for example like this:
body {
perspective: 800px;
-webkit-perspective: 800px;
}
And it works fine in Firefox as well.
Updated fiddle here: http://jsfiddle.net/6gdrQ/3/
Inspired by Design Shack, I wanted to have some linkable photos zoom in slightly when hovered over. However, I want the animations to be centered, so it's like we're zooming in slightly.
In order to keep the image centered, I fiddled with top, left, margin-top, and margin-left to make it work. I'm not even sure how it works :-) but it works...
...except that the animation is actually kind of choppy and jumpy, at least in Safari - worst of all in Safari on 10.9. (Firefox and Chrome do a better job though.)
Check out the example here:
http://jsfiddle.net/MnHVk/1/
The salient piece:
.card img:hover {
height:110%;
width:110%;
top:10%;
left:-10%;
margin-top:-10%;
margin-left:5%;
}
Compare the jumpy animation to the version that doesn't try to center, here:
http://jsfiddle.net/MnHVk/2/
Can anybody think of any other way to do this hover animation that won't result in such a jumpy effect? Perhaps there's some other technique for adjusting the positioning so that when the image is hovered over, it moves smoothly?
If you use transform, it should render thru the GPU, and I think, smoothly
.card img:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
transform-origin:50% 50%;
}
updated demo
I'm trying to create images that will drop out in any direction when hovered over, using just HTML and CSS.
What it's meant to look like:
not hovered over: a section of the image is displayed
hover: the remaining section of the image slides out (in a CSS specified direction)
What I've tried doing:
a <div> to hold a background-image that cuts off at a certain height and slides out using css animations on hover
<html>
<body>
<style>
#-webkit-keyframes resize {
0% {
}
100% {
height: 446px;
}
}
#pic {
height: 85px;
width: 500px;
background-image: url(http://images5.fanpop.com/image/photos/31400000/Cow-cows-31450227-500-446.jpg);
}
#pic:hover {
-webkit-animation-name: resize;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0.5s;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: forwards;
}
</style>
<div id="pic"></div>
<p class="center">Hover over me</p>
</body>
</html>
The problem with this approach is that this moves other content out of the way which I don't want.
This approach also doesn't work if I want to slide the image to the left or the right or upwards.
Any suggestions?
I put your code on fiddle an worked out a few examples for you:
move down: http://jsfiddle.net/rcCeP/
move up: http://jsfiddle.net/rcCeP/1/
move right: http://jsfiddle.net/rcCeP/2/
move left: http://jsfiddle.net/rcCeP/3/
for fun:
from center: http://jsfiddle.net/rcCeP/4/
in the document flow: http://jsfiddle.net/rcCeP/5/ (note the xtra wrapper with relative positioning)
how i would do it, with transitions in stead of animations, to work in two directions and degrade gracefully on older browsers: http://jsfiddle.net/rcCeP/6/
I could keep going on like this all day, this is real fun...
The key to prevent the content from getting pushed is making the picture position absolute. This will lift it out of the flow of the document. Then the direction just becomes a matter of playing around with the position and backround-position values.
Hope this helps!