I am trying to achieve a dead simple animation using rotations and keyframes, the animation is fired when the user hovers an element.
The problem is that when the user stops hovering the element the animation is not fired backwards
A live demo of my problem http://jsfiddle.net/9eWhC/
Κeep in mind that the animations declaration has been added to the hover event
.b:hover {
z-index:900;
-webkit-transform:rotateX(-180deg);
-moz-transform:rotateX(-180deg);
-webkit-animation-name: spinz;
-moz-animation-name: spinz;
-ms-animation-name: spinz;
-o-animation-name: spinz;
animation-name: spinz;
animation-direction: alternate;
-webkit-animation-direction: alternate;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-ms-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
}
alternate cannot help you here - you need to play the animation at least twice for the same state, either normal (.b) or hover (.b:hover)to notice the effect of alternate. What you need to do in order to have the same animation reverset when hovering off is set that same animation on the normal state (.b) as well, but with an animation-direction of reverse.
modified fiddle
Related
If you have comma-separated values to declare multiple CSS3 animations, how can you restart the whole animation itself? First run slideUp, then run fadeOut (made possible with the animation-delay property), then restart all that.
.mySelector {
myAnimation:
-webkit-animation: slideUp 0.5s ease-in-out 0 1 normal forwards running,
fadeOut 1s ease-in-out 2s 1 normal forwards running;
}
You can do this by removing and adding the element again:
var elm = document.querySelector(".mySelector");
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);
https://css-tricks.com/restart-css-animation/
You need to add to animation property:
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
for full reference check the documentation.
I am trying to create an animation but when I use the following css:
.drop.animation {
animation-name: ripple;
animation-duration: 0.65s;
animation-timing-function: linear;
}
I get an error in the chrome developer tools that states beside an orange triangle with an exclamation mark that all of those are "invalid property values".
What are the proper values? I am trying to use these values.
As soon as you are in Chrome, you would use the -webkit- prefix for those values:
.drop.animation {
-webkit-animation-name: ripple;
-webkit-animation-duration: 0.65s;
-webkit-animation-timing-function: linear;
}
Also there was a typo in the last property.
I have a simple CSS3 animation here.
#FadeIn3 {
animation-delay: 20s;
-webkit-animation-delay: 20s;
animation: FadeIn 3s;
-webkit-animation: FadeIn 3s;
}
I guess I don't have to link the animation itself, because it works perfectly.
Also, the HTML is fine, everything works but the animation-delay.
The order is incorrect, you need to place animation-delay after animation which is shorthand property, and hence it resets the delay timer.
The order of animation shorthand is as follows...
The order is important within each animation definition: the first value that can be parsed as a <time> is assigned to the animation-duration, and the second one is assigned to animation-delay.
Credits: Mozilla Developer Network
So, you are defining that after the animation-delay property, and thus, animation resets the delay to 0
Demo (Wont work)
Demo 2 (Switched the order of properties defined)
Note: I've minimized the timer to 3s delay so that you can see the
effect faster.
Advice: Always declare prefixed properties before declaring standard ones, so instead of writing like
animation-delay: 20s;
-webkit-animation-delay: 20s;
Have an habit of writing the properties like
-webkit-animation-delay: 20s;
animation-delay: 20s;
I came across a puzzling issue, where the computed style of an attribute has a different value than the element's style.
A few words first to describe my situation
I am animating the background-color property of an element and when the animation ends,
I retrieve the computed bgcolor value and apply it to the element's style. This works fine
However, if I try now to alter the bgcolor nothing happens, although the value is indeed set on the element, as the developer tools report.
At this point if you toggle (through the browser's developer tools) between style and computed style, there is a discrepancy between what the 2 report, with the computed style taking precedence of course.
I have created a test script on fiddle that depicts the situation
http://jsfiddle.net/d2S3d/14/
Attaching also some sample css cause stackoverflow does not let me to submit the post without it
.animate{
animation-name: bg_kf;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-direction: normal;
-webkit-animation-name: bg_kf;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-webkit-animation-direction: normal;
-moz-animation-name: bg_kf;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 0s;
-moz-animation-iteration-count: 1;
-moz-animation-fill-mode: forwards;
-moz-animation-direction: normal;
-o-animation-name: bg_kf;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 0s;
-o-animation-iteration-count: 1;
-o-animation-fill-mode: forwards;
-o-animation-direction: normal;
}
#keyframes bg_kf {
from {background-color:#FFFFFF}
to {background-color:red}
}
#-moz-keyframes bg_kf {
from {background-color:#FFFFFF}
to {background-color:red}
}
#-webkit-keyframes bg_kf {
from {background-color:#FFFFFF}
to {background-color:rgba(255, 140, 74, 0.16)}
}
#-o-keyframes bg_kf {
from {background-color:#FFFFFF}
to {background-color:rgba(255, 140, 74, 0.16)}
}
Any help appreciated
regards
The problem here is that the animation properties you have defined in .animate keep the background color red, regardless of what the actual inline style rule specifies. This is why toggling the inline style doesn't seem to have any effect.
If you were to remove the .animate class right after you apply the inline style, everything will once again be back to normal:
$("#sample").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(){
var computedBg = $(this).css('background-color');
$(this).css('background-color', computedBg);
$(this).removeClass('animate');
});
Here is a demonstration (try clicking the button after the animation has completed): http://jsfiddle.net/vcfDj/
You've set animation-fill-mode "forwards". The effect of that is to hold the animated CSS properties at the values they were when the animation ended (regardless of other style settings). Setting it to "none" will fix your problem!
i am using keyframes to scale an element on my webpage. The problem is that the animation is running perfectly in chrome but its not running in safari. I am providing values at 0% , 80% and 100% in keyframes and everytime the animation ends it goes back to the properties defined at 80% and not 100%. i also used fill-mode to stop animation at last frame but still got no solution.
#-webkit-keyframes leftpageanim {
0%{ -webkit-transform:scale(1);
bottom:-26px;
}
80%{
-webkit-transform:scale(1.8) ; bottom:140px;
}
100%
{
-webkit-transform:scale(1.7); bottom:120px; }
}
after the animation ends its again reverting back to properties of 80%
I did some changes in the code. Look at this jsfiddle. The animation now stops at 100%. That's what you wanted, right?
from:
.animator {
-webkit-animation-name: leftpageanim;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 5s;
to:
.animator {
-webkit-animation: leftpageanim 5.0s ease-in-out forwards;
-webkit-animation-iteration-count: 1;