I created an animation for an div, so it pulses when the mouse hovers the div. But when I leave the div with the mouse, the div snaps back into the original state. Is there possibility to transform it smoothly back to the origin?
http://jsfiddle.net/ninerian/npN89/
I tried a transition of padding and font-size, but it looks not so smooth and the origin isn't centered like with transform.
What you want is -webkit-animation-fill-mode: forwards; I coudln't get it to work in jsfiddle for some reason, but that is supposed to allow the animation to complete after being stopped if it is stopped in the middle of the animation.
Related
While animating a page transition I noticed a weird behavior.
On mobile... when I start a page from translate(%100,0); it starts from its beginning position and animates out of view to the left instead of starting from outside of view to the left... and animating to the center of view.
You can see the issue live at dbz-test.myshopify.com.
The animation works perfectly on desktop... but try it from your phone.
I have a scenario where I need to animate a div that has a children acting as background helpers. The children need to stay behind the div's background at all time. Without animation adding
z-index: -1 keeps them behind the tranparent background. However they do not stay behind the background when animating.
I have prepared a jsFiddle to show this:
-->https://jsfiddle.net/Jonathan002/gmv70wz7/6/
I know I can fix this by adding an extra div tag to be the background instead. I want to avoid this and direct the question on why the animation will alter my z-index values. Is there another property change happening when the div is animating?
How can I get the div to animate-in naturally (with no changes to dom) while retaining the z-index values?
Elements with transform and opacity don't obey regular z-index order.
That's because browsers create a separate layer to accelerate animations with transform, and per spec the opacity property requires special handling for compositing.
I designed some clouds and now I need to create an infinite CSS horizontal scroll animation (left to right) on them. I tried some solutions but I never found the result I was looking for. Each time there is some breaks in the animation. I really need an infinite effect, non-stop scrolling.
Here is the Fiddle
<div class="magic-clds blue-cld"></div>
I have a bunch of tiles on a page that expand as the user mouses over them. The expanded one should have the highest z-index, and this works, but I need the z-index to remain until the size transition is complete. Is there a way to do this using CSS only, no JavaScript? Since I'm using transitions, I'm not too worried about compatibility here, I applied progressive enhancement correctly.
Here's a jsFiddle that demonstrates this. Mouse over A; it transitions out. Mouse off of it, however, and it falls behind B. I need it to stay in front of B until the transition completes. Is there an elegant way to do this?
You need to define the z-index, as well as animate it.
This works in Firefox (8.0.1) and Webkit.
You need to set z-index to transition too: http://jsfiddle.net/uHJwT/2/
Try using transitions like in http://jsfiddle.net/frozenkoi/YK52N/ (note the comments in the CSS section, for both the .item and .item:hover)
The trick is to use transitions for the z-index property too. You can set, for example, a value of 10 for the normal items and 11 for the hovered ones. You also have to use transition-delay so that the animation for moving the mouse out doesn't reset the z-index inmediately. Next, add a different value to transition-delay to the rule for :hover with a value of zero so that the z-index does update inmediately when the mouse goes into the item.
In short, .item has the transition for mouse out of the item and .item:hover the rules for when the mouse moves in.
Here's the one solution: http://jsfiddle.net/uHJwT/4/
Essentially, it uses another wrapper div that has sufficient width & height to cover animated surface - on hover, it elevates its z-index so that the animated div remains on top. Of course, this is not full-proof solution - it is based on the fact that typical hover off would be down movement and it works for that - but hover off in diagonal direction would not work. But seems to be a reasonable CSS only solution - I would rather used js to get a perfect one.
The code : http://jsfiddle.net/Gwx6E/
When you mouse over the div, and when the div boundary reaches the cursor the normal styles of the class .a are applied.
Making it to move under the cursor, which triggers the hover. This goes into the infinite loop.
Is there any way to slove this problem, with css3 alone ?
Nope, it's the desired behavior (however there are the differences in some browsers: not everyone updates the hover state without the cursor's moving).
You can try to change the way your code is: add a wrapper and trigger the hover on it, so only the child block would move, but the hover would still be on the parent.
Here is an example: http://jsfiddle.net/kizu/Gwx6E/1/
Another way is to use the pseudo-element, that would be positioned over the screen so the hover would be always on the element when it would animate, here is an example: http://jsfiddle.net/kizu/Gwx6E/2/ — however the drawback is that you could't de-hover this block until there won't be any blocks with bigger z-index that would be positioned in places where you'd like to unhover the block.