I have a div, which I rotate it 360 degrees with css transitions on hover style. When the mouse is out, animation stops and div returns to its original style. Is it possible to go on rotating until it complete 360 degree rotation even the mouse is out of the div ? I am looking for a pure css solution, not jscript.
Thanks for your help :)
I'm afraid there isn't a neat solution for this. There is a workaround previously posted by Robert McKee that consists in using an animation with a high delay in normal css selector.
There's the jsfiddle example with a rotation:
http://jsfiddle.net/akko82/FNKMF/
This line will do the job:
-webkit-animation:rotateAnimation 3600ms ease-in-out 6000s;
where rotateAnimation is our animation and the 6000s is the delay.
Related
I have 4 overlays inside a container (overflow: hidden) translated horizontally 100% on default.
.active on the .overlay animates it into view.
activating another one removes .active from the current one and adds .active to the new one.
Now I want a transition delay on the "new active" element, because animating both the old and the new overlay at once results in inconsistent visuals (overlays overlaying each other etc.). And both animating simultaneously feels too hasty.
My first approach:
sibling selector to delay the transition for all siblings of the .active, didn't work out, since the sibling selector doesn't look "behind" or "around" ...
Second approach:
class on parent atLeastOneIsActive and then apply transition-delay to .active. Didn't work aswell, because both the new and the old overlay then get a transition-delay, making all even worse.
Unfortunately I can't show you the live example.
The question is more in general anyways; but to get a picture of the result here 2 screenshots
hover on either pin or link
overlay displayed
I'm looking for a clean and sweet way to apply delays in certain situations.
jQuery is only used for class management.
activating another one removes .active from the current one and adds .active to the new one.
Is this "activation" made with jQuery .on("mouseover", function(){?
Because if you add and remove classes this way, why not simply use setTimeout on the .addClass()?
-------------------------
EDIT
I worked on it a while.
And I'm pretty sure to have a solution...
Let's say I found the exact nature of you specific problem, to be more exact.
I reproduced your problem and the solution in a fiddle.
But before you have a look to it, please read my explanations:
The image transitions are overlapping.
And that is because of their width versus their animation start position.
Since they are pushed to outer right of the viewport at a specific distance...
This distance is not enought versus the with of the images. It has to be twice (minimum) the larger image.
I found it by setting them all to a same size.
This is not mandatory... But sure is a good thing!
So, the solution is to push them twice this "max-width" away from the right side of the viewport.
I made a Fiddle and made 4 buttons (representing your map pins) to animate the images. I also assigned keyboard numbers to them, so it's easyer to closely watch the images without having to target the buttons with the mouse. ;)
And finally, there is a button "Toggle class equalSize" which forces the images to all the same size.
Have a look now!
:D
.active {
right:0;
}
img{
position:fixed;
right:-1200px;
top:100px;
transition: right 2s;
}
.equalSize{
width:600px;
height:450px;
}
I simply want my svg lines to reverse their animation after the user stops hovering over the parent div switch executes it.
There is a fair amount of code so I just made a jsbin:
http://jsbin.com/tiwejekicu/2/edit
So my question is: how do I get it to act like any old transition and reverse itself when the hover is over. ALSO: how come when the yellow box is clicked a blue fade comes from the left edge? Any ideas?! Thanks a lot for any help!
You need to have two #keyframe rules:
#keyframe in {
from {something;}
to {to something;}
}
#keyframe out {
from {something;}
to {transform: rotate(0deg);}
}
Check out this question it's basically the same.
i'm having a weird issue which i can't figure out (searching for a solution for 2 hours now).
I'm using a slider, which when slide is selected shows a caption (H3 and p). Everything works fine except opacity ease-in-out on caption elements when using transition-delay property.
In jsfiddle i've setup a demo. When clicked next or previous, the caption elements show up with a delay, but opacity easing on them doesn't work for a smooth transition. Any help appriciated :)
Now, this might just be me misunderstanding what you are trying to do, but it seems like you are incorrectly assuming inheritance of the transitions, as well as using imprecise selectors. Basically, the line #test input:checked ~ #full > .caption selects the .caption if any of the checkboxes are checked, i.e always.
In the end, you never really tell the elements to actually animate their opacity.
By rewriting your code a bit, I came up with this which should work a bit better.
As a side note, you shouldn't use duplicate ids (#full), if anything because it will break Javascript if you try to access it. Use space separated classes instead.
http://www.apple.com/why-mac/
has a cool little thing where you hover your cursor over the image and it scrolls upward to show hidden text.
I'm wanting to create a mockup with that same effect, where I have the mockup as one flat background image and then place the scrolling images on top of it.
Any ideas as to how I can do this?
You can do this with jQuery scrollable: http://flowplayer.org/tools/scrollable/
Looking into the source for the page (with Firefox/Firebug, by the way, which is awesome for this kind of reverse-engineering) I see that the javascript framework Scriptaculous is in use. Specifically, the BlindUp animation appears to be the one in use on that page.
Apple uses Scritaculous for that effect.
CSS Transitions?
(From the link above):
Transitions are specified using the following properties:
transition-property – What property should animate, e.g., opacity.
transition-duration – How long the transition should last.
transition-timing-function – The timing function for the transition
(e.g., linear vs. ease-in vs. a custom cubic bezier function).
transition – A shorthand for all three properties.
Here is a simple example:
div {
opacity: 1;
-webkit-transition: opacity 1s linear;
}
div:hover {
opacity: 0;
}
I have an Element object that I'm currently calling .hide() on. Instead, I'd like to fade out the opacity of the entire Element (and its children) to 100% (hidden) as a transition effect over maybe 500 ms or 1000 ms.
Can Fx.Tween be used for this? Is this possible--does the MooTools framework have an effect like this in its UI library?
$('myElement').fade(0.7);
sets the element opacity to 70%. Or
$('myElement').fade('out'); // fades the element out.
http://mootools.net/docs/core/Fx/Fx.Tween#Element:fade
Element Method: fade Element shortcut
method for tween with opacity. Useful
for fading an Element in and out or to
a certain opacity level.
In MooTools 1.3 you can set the 'tween' options, such as duration or transition, like this:
$('tweener').set('tween', {duration: 2000}).fade('out');
See also jsfiddle example http://jsfiddle.net/tofu/VU7Es/
and the docs http://mootools.net/docs/core/Fx/Fx.Tween#Element-Properties:tween
Use
$('myElement').fade('toggle')`;
it will automatically fade in and fade out the object depending upon its state.
Example : HTML
<div style='background-color:black;color:white' id="tweener">
HELLO WORLD
</div>
<button onclick="javascript:doTween()">TWEEN</button>
<script type='text/javascript'>
function doTween()
{
$('tweener').fade('toggle'); // out, in are other options available.
}
</script>
MooTools has a fade() method in it's FX.Tween package, as seen here.