add delayed time in css3 animation - css

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!

Related

Need help with understanding CSS3 animations

I am trying to learn animations in CSS3 but Im stuck with all the documentation out there. I have this code:
h1{
-webkit-animation: moveDown 1.s ease-in-out .6s backwards;
-moz-animation: moveDown 1s ease-in-out 0.6s backwards;
-o-animation: moveDown 1s ease-in-out 0.6s backwards;
-ms-animation: moveDown 1s ease-in-out 0.6s backwards;
animation: moveDown 1s ease-in-out 0.6s backwards;
}
#-webkit-keyframes moveDown{
0% {
-webkit-transform: translateY(-300px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
#-moz-keyframes moveDown{
0% {
-moz-transform: translateY(-40px);
opacity: 0;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
}
#-o-keyframes moveDown{
0% {
-o-transform: translateY(-40px);
opacity: 0;
}
100% {
-o-transform: translateY(0px);
opacity: 1;
}
}
I understand that webkit-animation - animation is the call for each browser.
I dont understand the modeDown. Is that like a variable?
1s is the length of the animations?
ease-in-out I dont understand
.6s is the delay
I dont get the backwards nor am able to find any info on it
Is this for the timing sequence?
#-moz-keyframes moveDown{
0% {
-moz-transform: translateY(-40px);
opacity: 0;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
Ive read this, this and this. Does someone mind explaining this better to me?
}
I dont understand the modeDown. Is that like a variable?
The animation moveDown starts at opacity:0 and -moz-transform:translateY(-40px) and finishes at opacity: 1 and -moz-transform: translateY(0px). This means that it starts completely transparent and shifted 40 pixels above where it normally is and ends at its regular positioning and fully opaque.
#-moz-keyframes moveDown{
0% {
-moz-transform: translateY(-40px);
opacity: 0;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
}
1s is the length of the animations?
Yes.
ease-in-out I dont understand
ease-in-out is an animation-timing-function, this specifies how to transition from 0% to 100% (or the other way). Ease in out will each in and each out of the animation so the change won't be so abrupt, another example is linear which will change in a completely uniform fashion.
There is a handy chart on this page that explains the difference better than words.
.6s is the delay
Yes.
I dont get the backwards nor am able to find any info on it
backwards and forwards are used for animation-fill-mode which says switch direction the animation should go. If forwards is chosen then the animation will run from 0% (transparent) to 100% (opaque), if backwards is chosen then the animation will run from 100% to 0%.
Further reading
The Art of the Web - timing functions
CSS3 animations spec
Mozilla developer - animation
It's often better to read the actual working drafts (or recommendations) from the W3C, since they provide complete information:
I dont understand the modeDown. Is that like a variable?
You could say so, however variables are usually mutable, while moveDown is simply an identifier for an animation. So it's simply the animation's name:
Keyframes are specified using a specialized CSS at-rule. A #keyframes rule consists of the keyword "#keyframes", followed by an identifier giving a name for the animation (which will be referenced using ‘animation-name’), followed by a set of style rules (delimited by curly braces). [source]
1s is the length of the animations?
ease-in-out I dont understand
.6s is the delay
The animation property is a shorthand for several animation-* properties at once:
<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>
As you can see the first property is the animation's name (see above), the second the actual length, the third one is the timing-function, in your case ease-in-out. This is basically a bezier-curve which modifies the timing. For example you want to speed up the animation at the beginning and the end, and have a more linear behaviour in the middle.
.6s is indeed the delay between the animations.
I dont get the backwards nor am able to find any info on it
Have a look at animation-fill-mode:
If the value for ‘animation-fill-mode’ is ‘backwards’, then the animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by ‘animation-delay’. These are either the values of the ‘from’ keyframe (when ‘animation-direction’ is ‘normal’ or ‘alternate’) or those of the ‘to’ keyframe (when ‘animation-direction’ is ‘reverse’ or ‘alternate-reverse’).

css3 animation delay at each step

i would like to make a slider with css3, I dont want any buttons for it. just an infinite animation that slides 5 individual images, the problem is i want something like this:
load in the page, wait 30sec then show 2nd wait 30sec then show 3rd wait 30sec then show 4th wait 30 sec then show 5th wait 30 sec then show first
#overflow #banner {
height: 350px;
width: 500%;
background: #fff;
-webkit-animation:slide-animation 10s infinite;
}
#-webkit-keyframes slide-animation {
0% {margin-left: 0;}
20% {margin-left:-100%;}
40% {margin-left:-200%;}
60% {margin-left:-300%;}
80% {margin-left:-400%;}
100% {margin-left:0;}
}
how can i do that?
use the css property animation-delay (-webkit-animation-delay or -moz-animation-delay). Duplicate the animation and set these delays to 30s, 60s, 90s etc
I have done this another way myself here is my example:
-webkit-animation: baloon 10s ease-in-out 3s infinite normal;
#-webkit-keyframes baloon {
0% { -webkit-transform: translate(0px, 0px); }
50% { -webkit-transform: translate(50px, 75px); }
100% { -webkit-transform: translate(0px, 0px); }
}
The 3s in the first line will delay it by 3 seconds before it starts after the page loads.
To make the initial delay you add 30s after the 10s, that sets the initial delay.
To set up the recurring delays, you can use the setInterval function in javascript to change the animation state every time interval you want.
You can use this code as a springboard for the css:
animation-play-state: paused;
-moz-animation-play-state: paused; /* Firefox*/
-webkit-animation-play-state: running; /* Safari and Chrome */
-o-animation-play-state: running; /* Opera */
With javascript, this function should do the trick:
function changeAnimState() {
x = 0;
var banner = document.getElementById("banner");
if (x%2 == 0) {banner.style.animationPlayState="running";}
else {banner.style.animationPlayState="paused";};
x+ = x;
)
window.onload = setInterval(changeAnimState(), 30000);
This code is for the unprefixed animation play state, to added the prefixed versions, just add: WebkitAnimationPlayState or MozAnimationPlayState or OAnimationPlayState.

How to animate multiple CSS transform properties separately using keyframe animation

I want to animate two (or more) CSS transform properties separately using keyframe animation like this:
#keyframes translatex {
100% {
transform: translateX(100px);
}
}
#keyframes rotatez {
100% {
transform: rotateZ(80deg);
}
}
HTML:
<div class="rect"></div>
The translatex animation should start with a 0s delay and last for 5 seconds. The rotatez animation should start with a 1s delay and last for 3 seconds. The .rect element starts moving, then after 1 second it starts rotating, then after 3 seconds it stops rotating and after 1 more second it finishes its movement.
Apply animation:
.rect {
animation-name: translatex, rotatez;
animation-duration: 5s, 3s;
animation-timing-function: ease, ease-in-out;
animation-delay: 0s, 1s;
animation-direction: forward, forward;
}
The problem is that only the rotatez animation is applied.
Are there ways to implement the animation using only CSS, such as keyframe animation or transitions, or do I need JavaScript and requestAnimationFrame?
Yes, it is possible. Instead of calling two animation-names, create only one animation with both actions inside:
#keyframes translateXandZ {
100% {
transform: translateX(100px) rotateZ(80deg);
}
}
Look at Google's "Animate your HTML5" presentation.
Here is a workaround, even though it is a bit of a coarse version:
#-webkit-keyframes translateXandZ {
0% {-webkit-transform: translateX(0px) rotateZ(0deg);}
2% {-webkit-transform: translateX(1px) rotateZ(0deg);}
5% {-webkit-transform: translateX(3px) rotateZ(0deg);}
20% {-webkit-transform: translateX(20px) rotateZ(0deg);}
80% {-webkit-transform: translateX(80px) rotateZ(80deg);}
95% {-webkit-transform: translateX(97px) rotateZ(80deg);}
98% {-webkit-transform: translateX(99px) rotateZ(80deg);}
100% {-webkit-transform: translateX(100px) rotateZ(80deg);}
}
Your animation is linear, but to make it ease-in-out, I played with the beginning and ending of the animation. It's still not perfect, but this is the only way I see how you could get what you want.

Have CSS3 spin start slow then end slow?

This is not a question that can be solved by using ease-in.
If I have an element that I want to spin in CSS3 for a certain amount of time, but that starts off slow and ends slow, how can I do this?
CSS
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
div{
background-image:-webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(51,51,51,1) 20%,rgba(0,0,0,1) 20%,rgba(51,51,51,1) 40%,rgba(0,0,0,1) 40%,rgba(51,51,51,1) 60%,rgba(0,0,0,1) 60%,rgba(51,51,51,1) 80%,rgba(0,0,0,1) 80%,rgba(51,51,51,1) 100%);
width: 200px;
height: 200px;
-webkit-animation-name: spin;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 60.5;
-webkit-animation-timing-function: ease-in;
}
HTML
<div></div>
I can't seem to figure out how to do this. My animation runs for a total of 121 seconds, since it takes 2 seconds for one spin to complete, so 60.5 spins will take a total of 121 seconds (if my math is incorrect, please tell me). This works fine, except that I want the div to start spinning off slow, then completed all 59 rotations, then end slow for the last one.
I'd like to use pure CSS for this, if possible.
Sorry that I don't have a JSFiddle...
Edit: I used a relative solution in my experiment: CSS3 Clock, could that count as a half fiddle? :D
Edit #2: JSFiddle provided by #Charlie: http://jsfiddle.net/7DPnc
If it really has to be pure CSS, I would suggest wrapping 3 divs together and spin them separately:
CSS
div.first_round
{
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:1;
}
div.last_round
{
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:1.5;
-webkit-animation-delay:100s; /* you'll have to do the math */
}
div.main_round
{
-webkit-animation-duration:2s;
-webkit-animation-delay:3s;
-webkit-animation-iteration-count:59;
-webkit-animation-timing-function:linear;
}
HTML
<div class="first_round">
<div class="last_round">
<div class="main_round">
</div>
</div>
</div>
Or if you don't mind using a little JS, listen to animationend event...
You need 60 spins in 120 seconds right?
Lets first change the iteration count to 1.
-webkit-animation-iteration-count:1;
and the duration to 120 seconds
-webkit-animation-duration: 120s;
Now set the amount of spins. (360deg x 60spins)
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(21600deg); }
}
And now we'll modify that to set the timing. (shave a rotation off each side, add to new section)
#-webkit-keyframes spin {
10% { -webkit-transform: rotate(360deg); }
90% { -webkit-transform: rotate(20880deg); }
100% { -webkit-transform: rotate(21600deg); }
}
Lastly, we set the easing function to linear in order to avoid the stop that will occur between keyframe sections if you use a curve. (replace with ease, ease-out, etc to see what I mean)
-webkit-animation-timing-function: linear;
You can easily tweak the timing by changing duration, and the keyframe percentages.
DEMO

-webkit-animation-fill-mode in safari

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;

Resources