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;
Related
I want change content in class .glyphicon-volume-down:before (class icon in bootstrap) but only work on Google Chrome.
My keyframes don't change the content attribute but it is changing the color.
I don't know what I am missing? I don't want use JavaScript.
Here is my code :
.glyphicon-volume-down:before{
/*name keyframes is w-spin*/
animation-name:w-volume;
/*time animation done is 2s*/
animation-duration: 2s;
/*delay time when start animation is 0s*/
animation-delay: 0s;
/*loop animation forever*/
animation-iteration-count:infinite;
/*effect animation run with the same speed from start to end*/
animation-timing-function:linear;
/*default pause animation*/
/*animation-play-state:paused;*/
/*repeat*/
animation-direction: alternate;
-webkit-animation-name: w-volume;
-webkit-animation-duration: 2s;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
/*-webkit-animation-play-state:paused;*/
-webkit-animation-direction: alternate;
}
#-webkit-keyframes w-volume {
0% {
content:"text1";
color:yellow;
}
100% {
content:"text2";
color: red;
}
}
#keyframes w-volume {
0% {
content:"text1";
color:yellow;
}
100% {
content:"text2";
color: red;
}
}
The animation of content property does not work in Firefox because it is not an animatable property and as per the working draft of the W3C specs any property that is not animatable will be ignored.
Quoting the W3C Spec: (emphasis is mine)
The keyframe declaration block for a keyframe rule consists of properties and values. Properties that are unable to be animated are ignored in these rules, with the exception of ‘animation-timing-function’
The above extract would imply that the behavior in Firefox is correct whereas the one in Chrome isn't but as BoltClock points out in this answer, the spec's editor's draft has been updated and the updated text seems to imply that Chrome's behavior is the correct one. Maybe Firefox will change the behavior someday but since this spec has not reached maturity, it may take time.
The keyframe declaration block for a keyframe rule consists of properties and values. The properties defined by this specification are ignored in these rules, with the exception of animation-timing-function
Is there an equivalent for...
$.fx.off = true;
...in the world of pure css animations/transitions?
I'm working on a site that has tons of entry animations using both jquery and css, such that every time I change something and reload the page I'm stuck having to wait ten seconds for the entry anims to complete. It's pretty tedious.
This will make all animations and transitions hop to the last frame instantly once started, and also removes the delays:
* {
-webkit-animation-duration: 0s !important;
animation-duration: 0s !important;
-webkit-animation-delay: 0s !important;
animation-delay: 0s !important;
-webkit-transition-duration: 0s !important;
transition-duration: 0s !important;
-webkit-transition-delay: 0s !important;
transition-delay: 0s !important;
}
Demo
To apply it programmatically, change the selector to .no-anim * and apply the no-anim class to the <html> (or another containing element). Demo
I haven't tested this throughout yet, but it seems to work nicely for simple use cases at least. Feel free to adapt it to your needs, comment and improve.
There's no way of globally turning off CSS animations, however you could use a link to simulate animations being 'turned off':
Assuming your animations are bound normally:
body .elementClassName {
transition: propertyName 10s linear;
}
body:target .elementClassName {
transition: none;
transition: propertyName 0 linear;
}
This way, assuming that your body element has an id (for example <body id="bodyElementID">), if the page is loaded normally, at http://example.com/page.html transitions will occur, however if the page is loaded as: http://example.com/page.html#bodyElementID the transitions will not occur.
This is, without a demonstration of your real HTML a very generic overview of the possibility, but it's the only way I can think of.
There is no way to universally turn off CSS animations.
If you want to do something like this, place the animation pieces in a separate CSS class:
.AnimationOfWhatever {
-webkit-animation: entryAnimation 10s;
-moz-animation: entryAnimation 10s;
-o-animation: entryAnimation 10s;
-ms-animation: entryAnimation 10s;
animation: entryAnimation 10s;
}
and apply that class on your first load via jQuery (since you mentioned jQuery).
$('.ElementToAnimate').one('load',function(){
$(this).addClass('AnimationOfWhatever');
});
This will only load the animation once. If you want to only add that class once, create localStorage value and check that value:
$(function(){
if(localStorage['loaded'] === undefined){
localStorage['loaded'] = 'true';
}
$('.ElementToAnimate').on('load',function(){
if(!JSON.parse(localStorage['loaded'])){
$(this).addClass('AnimationOfWhatever');
}
});
});
This will only run the animation once across all pages.
I'm trying to animate (fade-in) 3 buttons. This is my html:
<aside>
<p><i class="icon-facebook"></i> Share</p>
<p><i class="icon-twitter"></i> Tweet</p>
<p><i class="icon-envelope"></i> Mail</p>
</aside>
and this is my css (the class .aside-check gets applied by javascript)
.aside-check {
animation: fadein 2s;
}
#keyframes fadein {
from {opacity:0;}
to {opacity:1;}
}
What I would like now, is to give every paragraph a little delay, I tried
p:nth-child(1) {animation-delay:2s}
p:nth-child(2) {animation-delay:3s}
p:nth-child(3) {animation-delay:4s}
but that doesn't work. Unfortunately I don't know what I did wrong...:/
Well, first you need to apply the animation to the paragraphs not the aside. Always remember, animations don't inherit. Second, don't forget your webkit prefixes! It's a pain but webkit browsers still require -webkit- before all animation properties and keyframe definitions. Without it your animation won't work on, Chrome, Safari, Android, etc. (If you can't remember if you need prefixes take a look at caniuse.com http://caniuse.com/#feat=css-animation)
Also note that if you want the paragraphs to be hidden then revealed you will want to define them with an opacity of 0 and then set the 'animation-fill-mode' to forwards so that the properties in the 'to' frame stick after the animation finishes.
I made a little JS fiddle with a working example, hope it helps!
http://jsfiddle.net/Ashwell/HqBZU/
Here are the important bits:
The animations applied to the paragraphs with the fill-mode set and starting opacity.
.aside-check > p{
animation: fadein 2s;
-webkit-animation: fadein 2s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
opacity: 0;
}
You'll also need the webkit key frames
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
And don't forget to add -webkit-animation-delay: 2s; to each of the nth-child selectors with the respected delay time!
I hope this answer isn't coming too late!
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
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!