This is a very general question, so I have not provided a code.
I was trying out various CSS animations yesterday, however, I was unable to control any of them using the :hover pseudo element in CSS. I basically wan't to slow the animation when a user brings his/her mouse onto the division.
Pure CSS solution will be appreciated. :) thanks in advance.
There is no "comon way" to do this. You will need to find some workarounds.
The most common workaround to slow a CSS animation down on hover is to apply the same animation on the element and it's parent and pause one on hover with the animation-play-state: paused;. (or the other way around with animation-play-state: running;)
EXAMPLE (comes from this answer : Change the Animation speed on hover)
As you can imagin this can't work for all animations and you will need to be creative in each situation to find a solution for this.
Related
I didn't see anything that really hit on what I'm trying to do. I know that animating gradients used to not be possibly but I think that's changed in the last year or so. Does anyone have any advice about how to move four divs with different background gradients through css3 transitions? I'm trying to create a nighttime to dawn to day gradient transition and can't seem to make it work. Ideally I'd love to do it just with css3 but if I have to use JavaScript or jQuery, that's fine. Also, I'd like to make it happen on load and not need a :hover pseudo class.
Thanks in advance!
I am developing an app using PhoneGap and jQuery, and am a little confused about animations.
I decided to go with what I already knew, which was jQuery animate, and this worked great, except I came across people talking about hardware acceleration.
All I am doing is animating a div to move right on page load:
$("#"+that).find('.captionShine img').animate({left: '550'},700);
I found a plugin called jQuery-Animate-Enhanced which turns these animations into CSS3 transitions, therefore hardware accelerating them (I believe).
So I looked more into the CSS3 animations, and am confused as to the difference between transitions and animations in CSS3. Can I still use hardware accleeration on the CSS3 animations? Or can it only be done on transform: translate3d(0,0,0);?
Is it just a case of assing translate3D to any element I want to have hardware accelerated?
kirupa has a very good explaination here: http://www.kirupa.com/html5/css3_animations_vs_transitions.htm
Skip down to read his conclusions bullet point first and then start reading from the top to fill in the details. Basically, transition and animation are two different way you define animation in css. Below is my own translation of the author conclusion.
Transition allow you to do very simple css that animate from a to b. Imagine you have an element with class="from-a" then you add a class to that element called class="to-b". Your transition definition in class="to-b" is where your animation ends.
Animation allow you to define/orchestrate the entire animation using keyframe css definition. Keyframes allow you to breakdown and orchestrate series of complex animations.
As you can see, because Transitions are based on adding of class or style to an element. You can easily define a series of classes and use with javascript+timeout to set these class and create the same kind of orchestration as Animation.
I'm trying to create a count-up animation using CSS3 that starts at a certain number "X" and counts up at a set interval by +1 using an animation sort of like this.
I know its possible to use the animation-duration line as the animation length, and just set the animation-iteration-count to infinite, but is it possible to make it load as "X+1" on each restart of the animation?
Thanks!
A thorough solution with many CSS-only options for counters is this!
It could maybe be done with a pseudo-element where you animate the content attribute, but support of CSS animations on pseudo-elements is still somewhat sketchy.
A JS-free solution would be to put the couting numbers actually in the HTML and then animate between those with
-webkit-animation-timing-function: steps(X);
Example here: JSFiddle
Depending on your feelings towards extra markup I would probably go with a JS solution (there's plenty out there).
Is there any way to restart a CSS3 animation when clicked without using JavaScript?
there is a css-trick summarizing some methods of doing this. You can try the :target pseudo-class instead of the checkbox-hack.
Edit:
Made a fiddle of the example using the :target pseudo-class.
You could do it with the Checkbox Hack though it generally isn't encouraged.
Might be worth looking into however. It is an intriguing use of html and css.
EDIT
After a bit of play, I came up with this example. The hardest part is actually just resetting the animation without javascript, not registering the click event. To get around it I duplicated the animation to a second css rule that begins when the checkbox is hit.
There may be a better way to do it, but this would theoretically work, aside from being a bit unconventional :)
I am following a CSS3 transition tutorial: here
I cant manage to get this to work without having to hover. Does anyone have any idea how I could have this same effect from this tutorial without having to hover on the body?
Thanks
You can simplify the answer from #Rufus by simply putting the 'test' class on the body directly in the markup. There's no reason to add it with javascript later.
If you were using css3 transition, then you WOULD need to add the transitioned class after page load, but since you are using keyframe animation, you don't need to wait before adding it.
Here's the example from #Rufus modified to show what I'm talking about: http://jsfiddle.net/mALEC/2/