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.
Related
I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen.
However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%), or else how to get rid of the whole div it is in once it has played.
#keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
You're looking for:
animation-fill-mode: forwards;
More info on MDN and browser support list on canIuse.
If you want to add this behaviour to a shorthand animation property definition, the order of sub-properties is as follows
animation-name - default none
animation-duration - default 0s
animation-timing-function - default ease
animation-delay - default 0s
animation-iteration-count - default 1
animation-direction - default normal
animation-fill-mode - you need to set this to forwards
animation-play-state - default running
Therefore in the most common case, the result will be something like this
animation: colorchange 1s ease 0s 1 normal forwards;
See the MDN documentation here
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
Browser Support
Chrome 43.0 (4.0 -webkit-)
IE 10.0
Mozilla 16.0 ( 5.0 -moz-)
Shafari 4.0 -webkit-
Opera 15.0 -webkit- (12.112.0 -o-)
Usage:-
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
The best way seems to put the final state at the main part of css. Like here, i put width to 220px, so that it finally becomes 220px. But starting to 0px;
div.menu-item1 {
font-size: 20px;
border: 2px solid #fff;
width: 220px;
animation: slide 1s;
-webkit-animation: slide 1s; /* Safari and Chrome */
}
#-webkit-keyframes slide { /* Safari and Chrome */
from {width:0px;}
to {width:220px;}
}
Isn't your issue that you're setting the webkitAnimationName back to nothing so that's resetting the CSS for your object back to it's default state. Won't it stay where it ended up if you just remove the setTimeout function that's resetting the state?
I just posted a similar answer, and you probably want to have a look at:
http://www.w3.org/TR/css3-animations/#animation-events-
You can find out aspects of an animation, such as start and stop, and then, once say the 'stop' event has fired you can do whatever you want to the dom. I tried this out some time ago, and it can work, but I'd guess you're going to be restricted to webkit for the time being (but you've probably accepted that already). Btw, since I've posted the same link for 2 answers, I'd offer this general advice: check out the W3C - they pretty much write the rules and describe the standards. Also, the webkit development pages are pretty key.
Nobody actualy brought it so, the way it was made to work is animation-play-state set to paused.
I learned today that there is a limit you want to use for the fill-mode. This is from an Apple dev. Rumor is * around * six, but not certain.
Alternatively, you can set the initial state of your class to how you want the animation to end, then * initialize * it at from / 0% .
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 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 have an element that has css3 animation with keyframes applied to it but still I want to scale this element. But it seems that because transform translate is already applied in the animation transform scale is not working
e.g.: let say I have 4 clouds (div elements) moving from right to left, I want those clouds to be different scales
.x1 {
-webkit-animation-name: moveclouds;
-moz-animation-name: moveclouds;
animation-name: moveclouds;
-webkit-animation-duration: 170s;
-moz-animation-duration: 170s;
animation-duration: 170s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: scale(0.79);
-moz-transform: scale(0.79);
-ms-transform: scale(0.79);
-o-transform: scale(0.79);
transform: scale(0.79);
}
.x2{ ...}
.x3{...}
.x4{...}
#keyframes moveclouds {
from {
transform: translateX(2400px);
/* note: I'm using vendor prefixes, I just want to simplified it here */
}
to {
transform: translateX(-200px);
}
}
animation works well, scale not
question: anyone got an ide how to enforce the scale ?
I'm using this example http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background but tweeking it a bit (see the keyframe difference)
When setting a CSS property, you must set the complete value for the property. So in your example you are wanting to set the TRANSFORM property with multiple types of transforms (translateX and scale). You must set ALL transforms on a single property. Remove the current SCALE styles, and do the following (with vendor prefixes). Yes... you will have duplication. This is a shortcoming of complex CSS3 property values.
#keyframes moveclouds {
from {
transform: translateX(2400px) scale(0.79);
/* note: I'm using vendor prefixes, I just want to simplified it here */
}
to {
transform: translateX(-200px) scale(0.79);
}
}
To expand on this more, if you had an element with multiple background images:
.some-div {
background-image: url("img1.png"), url("img2.png");
}
and you wanted to change img2.png to img3.png on hover, you would have to:
.some-div:hover {
background-image: url("img1.png"), url("img3.png");
}
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!