I am wondering if I can achieve my simple delay -> fadeins (jQuery chaining animations) with only CSS and allow to loop infinitely.
$('.learnwhat').delay(1000).fadeIn(1000);
$('.learnwhat').delay(1500).fadeOut(1000);
$('.seeresults').delay(3000).fadeIn(1000);
$('.seeresults').delay(1000).fadeOut(1000);
$('.personalsolution').delay(6000).fadeIn(1000);
$('.personalsolution').delay(1000).fadeOut(1000);
You can always use css animations and calculate the % of the keyframes by dividing 100% / total seconds.
So for example the
$('.learnwhat').delay(1000).fadeIn(1000);
$('.learnwhat').delay(1500).fadeOut(1000);
would become (1s delay + 1s fadeIn + 1.5s delay + 1s fadeOut = 4.5s, 100% / 4.5 = 22.2% per second or 11.1 per half second since we want that as well)
.learnwhat{
padding:5px;
background:khaki;
border:1px solid #ccc;
animation: learnAnimation 4.5s infinite;
}
#keyframes learnAnimation{
0%{opacity:0}
22.2%{opacity:0}
44.4%{opacity:1}
77.7%{opacity:1}
100%{opacity:0}
}
<div class="learnwhat">learnwhat</div>
I have only included the standard keyframes syntax (no vendor specifics)
You can use the same logic for the other two.
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'm a "new" web designer, and I'm learning yet !
CSS is little hard to me... Please, somebody help me !! :)
I need to do a 4 image transition with fade, in loop, in a sequence from 1 to 2, than 3 and 4, returning to 1.
I already tryed 2 tutorials from here. But when I change the settings to fit to mine, doesn't Work.
My result is this :
http://www.mafeluvizotto.com.br/crossfading/
After the first sequence, the animation became weard...
The images are here :
...crossfading/1.jpg
(2.jpg, 3.jpg and 4.jpg)
Please, somebody could help me, to solve this ?
Thanks very much !!
The idea behind this is that you need to know the amounts involved. You have to calculate the timing of the animation vs. how many "slides" vs. how long you want them to be displayed for.
In the case of my example, it's 4 slides, 6 seconds each. That helps me calculate the timing of the animation and how long to delay the animation.
The animation timing is determined the 100% of the keyframes divded by the total # of slides, which in this case is 4. That determines that 25% (100/4) is when to fade out -
#-webkit-keyframes fade {
0%{
opacity: 1;
}
15% {
opacity:1;
}
25%{
opacity: 0;
}
90% {
opacity:0;
}
100% {
opacity:1;
}
}
The percentage before the fade-out and fade-in in this case is 10%. 25-10 = 15, and 100 - 10 = 90. That determines the fading time for each slide.
Then, the duration of the animation is determined by slides x display time. 4 slides multiplied by 6 seconds each gives us 24 seconds of duration.
The delay between each is that time minus each slide, or 6 seconds, which results in:
.slide:nth-child(1) {
-webkit-animation: fade 24s 18s infinite;
z-index:10;
}
.slide:nth-child(2) {
-webkit-animation: fade 24s 12s infinite;
z-index:10;
}
.slide:nth-child(3) {
-webkit-animation: fade 24s 6s infinite;
z-index:10;
}
.slide:nth-child(4) {
-webkit-animation: fade 24s 0s infinite;
z-index:10;
}
Here is a demo - http://jsfiddle.net/5zx43/1/
To keep the order of the HTML the same order of the slide-show, z-index will have to be utilized and the delay order of the animations in relation to :nth-child() will need to be reversed.
Here is a demo of "correct" order - http://jsfiddle.net/5zx43/2/
This has a great tutorial on it - http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/
Of course, keep in mind that keyframe and animation prefixes may need to be different for other browsers.
I'm trying to animate in elements sequentially in full css3 animations. Seems the very straight forward answer is using animation delay. However I wanted this in loop, any ideas how to make the animation loop infinitely?
I found this fiddle on a similar question. Basically that's the same logic but I just wanted it looped.
This was the similar [question] (https://stackoverflow.com/a/8294491/340888)
Was using this:
#-webkit-keyframes FadeIn {
0% { opacity:0; -webkit-transform:scale(.1);}
85% {opacity:1; -webkit-transform:scale(1.05);}
100% {-webkit-transform:scale(1); }
}
.myClass img { float: left; margin: 20px;
-webkit-animation: FadeIn 1s linear; -webkit-animation-fill-mode:both; }
.myClass img:nth-child(1){ -webkit-animation-delay: .5s }
.myClass img:nth-child(2){ -webkit-animation-delay: 1s }
.myClass img:nth-child(3){ -webkit-animation-delay: 1.5s }
.myClass img:nth-child(4){ -webkit-animation-delay: 2s }
Edit
Just to be clear, I want the animation in a sequential manner, say after the first one animates, it animates the 2nd item, then 3rd.. and so on. I'm thinking about animating around 10 to 12 elements. So they'll animate one after another.
So #Sonu Joshi's answer is incorrect.
You need to make the animation long enough so that all the elements have a chance to animate before the cycle starts again.
In this example, your 4th element only starts animating after 2 seconds. The transition itself is going to take another second, and then you might want a bit of a pause, say another second, before you reanimate the first element. So that's 4 seconds in total.
So you might want something like this: -webkit-animation: Fadein 4s infinite linear.
But you'll also need to adjust the keyframe percentages, dividing each of them by 4, since you still want the transition itself to take only 1 second.
#-webkit-keyframes FadeIn {
0% { opacity:0; -webkit-transform:scale(.1);}
21.25% {opacity:1; -webkit-transform:scale(1.05);}
25% {-webkit-transform:scale(1); }
}
Fiddle example
I have the following css3 rules
#sun, #sun div {
position:absolute;
border-radius:1000px;
-webkit-border-radius:1000px;
-moz-border-radius:1000px;
-ms-border-radius:1000px;
-o-border-radius:1000px;
animation:sunrise 3.2s ease 0 infinite alternate;
-webkit-animation:sunrise 3.2s ease 0 infinite alternate;
-moz-animation:sunrise 3.2s ease 0 infinite alternate;
-ms-animation:sunrise 3.2s ease 0 infinite alternate;
-o-animation:sunrise 3.2s ease 0 infinite alternate;
}
#-moz-keyframes sunrise {
0% {background:rgba(255,255,204,.23);}
75% { background:rgba(255,255,204,0.5); }
100% { background:''; }
}
However, the Firefox implementation doesn't seem to work.
The background colors are all set in rgba format
but each #sun div has a different color.
What could be the problem?
The code you've posted is very much incomplete, but there are quite a few things that aren't ok.
You should always write the unprefixed versions last, never before
the prefixed ones.
-ms-border-radius and -o-border-radius never existed! And unless you
need to support FF3.6, -moz-border-radius is useless. -webkit-border-radius is pretty much useless these days too - see http://caniuse.com/#feat=border-radius
Firefox 16+ (current version is 19) supports unprefixed keyframe animations! See http://caniuse.com/css-animation
0s, not 0! Plus the default value for the delay happens to be 0s anyway so you can omit it and just write animation: sunrise 3.2s infinite alternate; (the same way you can omit ease, which is the initial value for the timing function)
background: rgba(255,255,204,0), not background: ''!
And a question: why use such a huge border-radius? My laptop screen is much smaller than anything that would require such a huge border-radius. If you just to make a disc, give your element equal width and height and set border-radius: 50%.
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!