In the following animation, I haven't specified a timing function, such as linear or ease-in. It seems to default to ease-in, since it slows down once it begins reaching 0%. What is the actual timing function that is being used in this case (or the default)?
#-webkit-keyframes goleft {
0% { left:400px; }
100% { left:0px; }
}
. goleft {
-webkit-animation: goleft 10s infinite;
animation: goleft 10s infinite;
}
The initial value is ease according to the W3 docs on the subject
The CSS3 specification for Animations spells it out simply:
Name: animation-timing-function
Initial: 'ease'
Related
Have a look at this jsfiddle.
I'm using translate3d transformations with a timer function of 'ease':
#keyframes anim {
from {
transform:translate3d(0px, 0px, 0px);
}
50% {
transform:translate3d(100px, 100px,-100px);
}
to {
transform:translate3d(200px, 200px, 0px);
}
}
Why is it not a continuous animation, instead of pausing in the middle? This only happens when using ease-* as the timer function. Is this intended behaviour? If so, how can I make it a continuous animation?
In an animation using keyframes, the timing function is applied to every transition between keyframes.
You can set the timing function at the keyframe, or at the animation; that doesn't change the fact that those are separate functions.
That means that there is not a function that can achieve ease for the full animation easily. (it is fun that it is not easy to get ease :-) )
Since you have only two transitions (3 keyframes), however, an approximate alternative is to set ease-in for the first transition, and ease-out for the second.
For three transitions, the one in the middle would be linear
#-webkit-keyframes anim {
from {
-webkit-transform:translate3d(0px, 0px, 0px);
-webkit-animation-timing-function: ease-in;
}
50% {
-webkit-transform:translate3d(100px, 100px,-100px);
-webkit-animation-timing-function: ease-out;
}
to {
-webkit-transform:translate3d(200px, 200px, 0px);
}
}
fiddle
Notice that there is no timing function to be applied to the last keyframe, because that is applied to the interval and not to the keyframe.
Is this intended behavior?
Yes, that's how the ease-* timing function(s) are suppose to work.
Here is a visual taken from this MDN documentation on animation timing functions.
ease represents the timing function cubic-bezier(0.25, 0.1, 0.25, 1.0)
How can I make it a continuous animation?
Use linear, which represents the timing function cubic-bezier(0.0, 0.0, 1.0, 1.0)
Updated CSS
#a {
animation: anim 1s linear infinite alternate;
-webkit-animation: anim 1s linear infinite alternate;
}
UPDATED EXAMPLE
Okay heres my .css
.centerhex {
background-image:url(http://i.imgur.com/4sZDtfK.png);
height:224px;
width:210px;
position:absolute;
opacity:0;
transition:opacity 2s ease-in-out;
}
.transtart{
opacity:0
}
#-webkit-keyframes fadein {
0%{opacity:0;}
40%{opacity:1;}
50%{opacity:1;}
100%{opacity:0.05;}
}
#keyframes fadein {
0%{opacity:0;}
40%{opacity:1;}
50%{opacity:1;}
100%{opacity:0.05;}
}
.done{
animation-delay:0.5s;
-webkit-animation-delay:0.5s;
}
.fadein{
animation:fadein 0.65s;
animation-timing-function:linear;
animation-fill-mode:forwards;
animation-iteration-count:1;
-webkit-animation-iteration-count:1;
-webkit-animation:fadein 0.65s;
-webkit-animation-timing-function:linear;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes pulse {
0%{opacity:0.05;}
10%{opacity:0.1;}
100%{opacity:0.05;}
}
#keyframes pulse {
0%{opacity:0.05;}
10%{opacity:0.1;}
100%{opacity:0.05;}
}
.pulse{
animation:fadein 4s;
animation-timing-function:linear;
animation-fill-mode:forwards;
animation-iteration-count:infinite;
animation-delay:1s
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation:fadein 4s;
-webkit-animation-timing-function:linear;
-webkit-animation-fill-mode: forwards;
}
What I was curious about is if it is possible to create an id specifically for nesting predefined classes, such as:
#hexa.centerhex.transtart.fadein.done
So far experiments in doing this have failed.. so Im not entirely sure what Im doing wrong.
The idea I have for this is that Im going to be creating some script that replaces an ID with another ID. For instance I would make:
#hexa.centerhex.transtart.fadein.done
Turn into:
#hexb.centerhex.transtart.pulse.done
You can do what you're asking but it seems like you're hoping for an unrealistic result based on the ordering of your classes that you typed out. The rendering won't go in a certain order based on selectors you choose unfortunately.
However, this can be done with Javascript fairly easily using a setTimeout() if timing was an issue.
And if you don't care about the order of operations on these classes being added to each id, then you should be able to do this as much as you want (and with reasonably high success as the #id is only trumped by !important and client-side/browser settings).
Don't forget your semicolons :)
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;
I'm trying to
PLAY animation on hover.
PAUSE animation on hover out (i.e don't go back to frame 0).
Is it not possible to use -webkit-animation-play-state: paused; on a parent div?
See an example here, when you hover out it goes back to frame 0.
I don't want to use JS.
example jsfiddle
set the animation on #tech with play state paused
#tech {
-webkit-animation-play-state:paused;
-webkit-animation: moveSlideshow 10s linear infinite;
}
then change play-state to running on hover
#tech:hover{
-webkit-animation-play-state:running;
}
I was looking for this as well, and #MikeM's answer got me where I needed to go, and with #HellGate's comment on that answer concerning Chrome:
you need the pause state after the animation else it does not work
I was interested in how to pause animation on a PNG sprite sheet when it was inactive, and continue/resume on hover, so the accepted answer helped in that regard.
Here is a demo showing how this can be done on a PNG Sprite Sheet (credits to the sprite, and original CSS go to Guil Hernandez and his awesome blog post here): CodePen.
The important CSS parts:
.monster {
width: 190px;
height: 240px;
margin: 2% auto;
background: url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center;
-webkit-animation: monsterAnimation .8s steps(10) infinite;
animation: monsterAnimation .8s steps(10) infinite;
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused;
}
.monster:hover {
-webkit-animation-play-state: running;
animation-play-state: running;
}
#keyframes monsterAnimation {
100% { background-position: -1900px; }
}
Check the JSFiddle here: http://jsfiddle.net/fRzwS/373/.
The animation doesn't stop because the late definition of animation overwrites the value of property animation-play-state. According to the W3C specification, animation:
The 'animation' shorthand property is a comma-separated list of
animation definitions, each of which combines seven of
the animation properties into a single component value.
And the seven properties are:
<single-animation> = <single-animation-name> || <time>
|| <single-animation-timing-function>
|| <time> || <single-animation-iteration-count> || <single-animation-direction>
|| <single-animation-fill-mode> || <single-animation-play-state>
It is similar to the properties background and background-color.
So in the original code:
#tech {
-webkit-animation-play-state: paused;
-webkit-animation: moveSlideshow 10s linear infinite;
}
Property animation-play-state is set to be paused. However, the late property animation OVERWRITES this value by its default value running. So, you can either define the property animation-play-state later (http://jsfiddle.net/fRzwS/373/):
#tech {
-webkit-animation: moveSlideshow 10s linear infinite;
-webkit-animation-play-state:paused;
}
Or you can simply use (http://jsfiddle.net/fRzwS/374/):
-webkit-animation: moveSlideshow 10s linear infinite paused;
Here is another example which works on both Chrome and Firefox: http://jsfiddle.net/MaY5A/694/
I don't have enough reputation to comment other answers. Well. #MikeM 's way works but he did a little mistake. Look:
#tech {
-webkit-animation-play-state:paused;
-webkit-animation: moveSlideshow 10s linear infinite;
}
This doesn't work and this shouldn't work. Animation shorthand note overrides animation-play-state. You need reorder these strings to get it working
I just set an animation to a div and it succeeded.
Now I want to get it proved because its delay is too short!
so how can I add the delayed time between animation (0% to 25%) and animation (25% to 50%)
here is the code:
#flow{
position:absolute;
-webkit-animation:mymove 10s ease-in-out;
-webkit-animation-iteration-count:3;
-webkit-animation-delay:1s;
}
#-webkit-keyframes mymove
{
0%{left:5px;}
25%{left:127px;}
50%{left:249px;}
75%{left:371px;}
100%{left:5px;}
}
everyone!Thanks for your attention !I have found the answer but I don't know the Api of the definition of percentage in keyframes!And if you know sth about it ,just give me a hand ,thanks a lot!
#-webkit-keyframes mymove
{
0%{left:5px;}
25%{left:127px;}
26%{left:127px;}
27%{left:127px;}
28%{left:127px;}
29%{left:127px;}
30%{left:127px;}
31%{left:127px;}
32%{left:127px;}
33%{left:127px;}
34%{left:127px;}
35%{left:127px;}
50%{left:249px;}
75%{left:371px;}
100%{left:5px;}
}
I don't think you can delay the single parts of an animation. What you could do, is to use two animations and start them with a delay.
#flow{
position:absolute;
-webkit-animation:
mymove_first 10s 0s 10 ease-in-out,
mymove_second 10s 2s 10 ease-in-out;
}
#-webkit-keyframes mymove_first
{
0%{left:5px;}
25%{left:127px;}
}
#-webkit-keyframes mymove_second
{
50%{left:249px;}
75%{left:371px;}
100%{left:5px;}
}
I ran into this problem, as far as I can find, without jQuery you can't delay the frames.
You can delay the start of the animation.
You can also get the animation to finish the same state as the original frame.
The mean one I use, is being able to do multiple animations, for example:
Your div:
<div id="bannerImg" class="banner-RunAnimation"></div>
Run animation
.RunAnimation {
-webkit-animation: animation1 3s 0s 1 ease-in-out,
animation2 5s 5s 1 ease-out forwards;
}
Animations:
#-webkit-keyframes animation1 {
0% {-webkit-transform: translateY(-0px);}
50% {-webkit-transform: translateY(-150px);}
100% {-webkit-transform: translateY(-150px);
opacity:0;}
}
#-webkit-keyframes animation2 {
0% {transform: translateY(-0px);}
100% {transform: translateY(-150px);}
}
By delaying the animations and using opacity, you can do qutie a few things, if this doesn't help look into jQuery
You can pause it playing with the percentages ( following your example ):
#-webkit-keyframes mymove
{
0%{left:5px;}
25%{left:127px;}
35%{left:127px;}
50%{left:249px;}
75%{left:371px;}
100%{left:5px;}
}
you dont need to put all the percentages between 25% and 35%, the browser is ignoring them.
you move from 0 to 25% from pixel 5 to 127, if your animation is 10 seconds it will take 2.5 seconds to do that, then pause 1 second between 25% to 35% since its the same pixel it wont move then continue to the next animation to pixel 249, it will take 1.5 seconds and so on...
hope this helps!