Oh hi there, have you ever wanted to create fade in like animations on page load? Think Google homepage, or even our site has plenty of them. This is different than having your animations come in as you scroll. This will all be done using CSS3 so this will work on all modern browsers except of course IE7, Ie8 and 9. IE10 should support them though, so now is a good time to start practicing. This is a super quick tutorial so sorry, there won’t be any body html code etc (ask in the comments if you have any questions).
We will cover how to achieve this:
See the Pen gaWMqm by Alex (@fabriceleven)
What we will do
We will create 3 boxes and they will fade in one after another. Here are our steps to accomplish this:
- Create a div in our html that we want to animate
- Create keyframes in our css file (these basically will define how things change )
- Create div tag in our css, define our animation (duration, start delay etc) and link it to our keyframes
So let’s get started
Ok let’s make some basic boxes
<body>
<div class="box fade-in one">
look at me fade in
</div>
<div class="box fade-in two">
Oh hi! i can fade too!
</div>
<div class="box fade-in three">
Oh hi! i can fade three!
</div>
</body>
Ok so the above basically makes 3 boxes, we named them box , the fade-in is going to be our animation class and the number after is just there so we can have them load in an order we want. And now for the magic code.
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}
.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}
/*---make a basic box ---*/
.box{
width: 200px;
height: 200px;
position: relative;
margin: 10px;
float: left;
border: 1px solid #333;
background: #999;
}
That’s all the code we will need.
Here is how it works
The keyframes (the reason there are 3 of them is to support webkit, firefox and future browsers) basically say the start state of our box and then the end state. Since we want the box to fade we start at opacity 0 and by the time we are done we end at opacity 1.
You can also put other parameters in there as well. For example you can start with width:100px; and end with width: 500px; etc. The fade-in class tells what kind of animation we will perform. Which is basically: go do keyframes called fadeIn, use ease-in animation and only do the animation once. Then stay at the last keyframe (-webkit-animation-fill-mode:forwards😉 to make sure our boxes don’t disappear and do all this in 1s: (-webkit-animation-duration: 1s).
The next 3 classes just give our animations different delays so they start one after another upon page load. And that’s it really.
You can have the duration in different classes as well, like: .one, .two etc that’s how we achieved the boxes loading right after another. You can see our chat icon slide out from bottom right corner on our design blog index page. We use fade along with a few other properties in the keyframe.
That’s about it, if you want a quick CSS you can just add to yours with a few prebuilt animations like fade down, up, left, right etc then see here. Let us know how you used it and if you have any questions or comments.
Here is quick tutorial on how to make animations come in on page scroll
wrong with firefox
What’s wrong with it, do you have a solution? This was created a long time ago.
http://www.cutedev.net/cate/apps/
http://www.cutedev.net/cate/apps/
see product box. it not fade in but it’s flashing
wrong with firefox
What’s wrong with it, do you have a solution? This was created a long time ago.
http://www.cutedev.net/cate/apps/
http://www.cutedev.net/cate/apps/
see product box. it not fade in but it’s flashing
This is a life saver man! Thank you!
This is a life saver man! Thank you!
rectify the spelling of codepen in view demo link
rectify the spelling of codepen in view demo link
done! Thanks for noticing and posting
done! Thanks for noticing and posting
how would i loop though this infinitely or javascript reload at the end of the animation? (ie: keep starting over?)
Adding
animation-iteration-count: infinite;
should do the trick
I tried putting that in both the .fade-in and .fade-in.###. unfortunately, it just makes the first image loop, not the rest.
how would i loop though this infinitely or javascript reload at the end of the animation? (ie: keep starting over?)
Adding
animation-iteration-count: infinite;
should do the trick
I tried putting that in both the .fade-in and .fade-in.###. unfortunately, it just makes the first image loop, not the rest.
Hi Alex,
How do you edit the code so that the text fades out after a specified duration and not repeat?
You would just add another level into your keyframe, so first it starts hidden, then it would show up and end hidden again, like:
@keyframes FadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
Hi Alex,
I replaced your original code:
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
with this code:
@-webkit-keyframes FadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes FadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes FadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
No change. What am I doing wrong?
Oops there was a typo, the name of the keyframe needs to match exactly so it should be
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes fadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
Then modify the animation duration value to change how long you want it visible
Still not working. Fades in, but won’t fade out.
Here is my code:
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes fadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
.big {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
-o-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:3s;
-moz-animation-duration:3s;
-o-animation-duration:3s;
animation-duration:3s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
You are missing a closing tag and you don’t have proper style declaration . I suggest you create a new codepen and test things there. The duration is how long the whole thing takes adjust the values in codepen and see how it effects it. For your case you might need to have 2 separate keyframes, one to fade it in and then start another keyframe (from opacity 1 to opacity 0) after some start delay to fade it out
Thanks Alex. We’re good. Appreciate the wonderful tool.
Regarding animation duration—what does that parameter specifically refer to? I see two parts: How long it takes for the animation to go from nothing to full fade in; how long the animation stays in the full fade in mode until it begins to fade out.
Are there separate adjustments for each of these?
Thanks.
Hi Alex,
How do you edit the code so that the text fades out after a specified duration and not repeat?
You would just add another level into your keyframe, so first it starts hidden, then it would show up and end hidden again, like:
@keyframes FadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
Hi Alex,
I replaced your original code:
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
with this code:
@-webkit-keyframes FadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes FadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes FadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
No change. What am I doing wrong?
Oops there was a typo, the name of the keyframe needs to match exactly so it should be
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes fadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
Then modify the animation duration value to change how long you want it visible
Still not working. Fades in, but won’t fade out.
Here is my code:
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes fadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
.big {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
-o-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:3s;
-moz-animation-duration:3s;
-o-animation-duration:3s;
animation-duration:3s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
You are missing a closing tag and you don’t have proper style declaration . I suggest you create a new codepen and test things there. The duration is how long the whole thing takes adjust the values in codepen and see how it effects it. For your case you might need to have 2 separate keyframes, one to fade it in and then start another keyframe (from opacity 1 to opacity 0) after some start delay to fade it out
Thanks Alex. We’re good. Appreciate the wonderful tool.
Regarding animation duration—what does that parameter specifically refer to? I see two parts: How long it takes for the animation to go from nothing to full fade in; how long the animation stays in the full fade in mode until it begins to fade out.
Are there separate adjustments for each of these?
Thanks.
Brilliant tutorial. Thank it is what I needed
Brilliant tutorial. Thank it is what I needed
haha the tab says it misses me when i change tabs. Sweet 🙂
haha the tab says it misses me when i change tabs. Sweet 🙂
nice
nice
Hi I was wondering if you could explain how this works on page load?
It’s just how the CSS3 animation feature works. If you set an animation on an element, it’ll start after whatever delay you have set.
Hi I was wondering if you could explain how this works on page load?
It’s just how the CSS3 animation feature works. If you set an animation on an element, it’ll start after whatever delay you have set.
I’m having trouble getting this to work properly. If I set opacity: 0; on the element to begin with, it won’t fade in.
I’m having trouble getting this to work properly. If I set opacity: 0; on the element to begin with, it won’t fade in.
Hi, everything works fine and suits my needs, but I have trouble to get
it to work on IE. I have tried with your recommendations with loading a
separate file for IE9. Can you please help?
Hi, everything works fine and suits my needs, but I have trouble to get
it to work on IE. I have tried with your recommendations with loading a
separate file for IE9. Can you please help?
It’s taken me days to find this great tutorial and I thought you had answered my prayers. Except. I’m guessing maybe this technique only works for graphics or images? Is it possible to use this technique to fade in ? I’ve tried every combination of syntax I can think of and nothing works. Is it just not possible? Thanks.
I dont think this will work on iframes since you can’t target it. However someone can prove me wrong 🙂
Thanks for the quick response. the search continues. If I find anything, I’ll let you know.
It’s taken me days to find this great tutorial and I thought you had answered my prayers. Except. I’m guessing maybe this technique only works for graphics or images? Is it possible to use this technique to fade in ? I’ve tried every combination of syntax I can think of and nothing works. Is it just not possible? Thanks.
I dont think this will work on iframes since you can’t target it. However someone can prove me wrong 🙂
Thanks for the quick response. the search continues. If I find anything, I’ll let you know.
Hi, can you please show me how to solve the IE9 issue. I don’t get it. Please!
IE9 actually doesn’t support animations. You have to add “opacity: 19; ” to the initial keyframes so that those items always show up on IE9. I have updated the codepen as well.
Thanks a lot! I found another issue. Opacity doesnt work with IE11. Thats why it didnt work. How can you make it work on IE11?
Yeah looks like you are right, have you tried the solution from here: http://stackoverflow.com/questions/23504400/css-opacity-not-working-in-ie11
Hi, can you please show me how to solve the IE9 issue. I don’t get it. Please!
IE9 actually doesn’t support animations. You have to add “opacity: 19; ” to the initial keyframes so that those items always show up on IE9. I have updated the codepen as well.
Thanks a lot! I found another issue. Opacity doesnt work with IE11. Thats why it didnt work. How can you make it work on IE11?
Yeah looks like you are right, have you tried the solution from here: http://stackoverflow.com/questions/23504400/css-opacity-not-working-in-ie11
Hi, how can I made it also zoom-in, like from scale(0) to scale(1). Thanks for your answer.
You can do the zoom property instead of the opacity in the keyframe. Try doing “zoom: 100%;” in one of them to “zoom: 150%;”
Hi, how can I made it also zoom-in, like from scale(0) to scale(1). Thanks for your answer.
You can do the zoom property instead of the opacity in the keyframe. Try doing “zoom: 100%;” in one of them to “zoom: 150%;”
thank you bro………………
thank you bro………………
Very nice animation! Thanks a Lot. But how can i make the animation after 10 seconds run again without clicking? Thanks for an answer!
You will most likely will have to remove and then add the class back after 10 seconds using jquery. There is a tutorial about it here: https://css-tricks.com/restart-css-animation/
Thanks a lot!
Hi Alex, unfortenateky nothing worked for me. The first two demos doesnt work in Firefox. Maybe you canpost a code that will work for your example above? So that the Animation reloads after 10 seconds? That would be great, thanks!
Very nice animation! Thanks a Lot. But how can i make the animation after 10 seconds run again without clicking? Thanks for an answer!
You will most likely will have to remove and then add the class back after 10 seconds using jquery. There is a tutorial about it here: https://css-tricks.com/restart-css-animation/
Thanks a lot!
Hi Alex, unfortenateky nothing worked for me. The first two demos doesnt work in Firefox. Maybe you canpost a code that will work for your example above? So that the Animation reloads after 10 seconds? That would be great, thanks!
I wanted to test this on mobile but the site seems to hang on mobile Safari. Scaling the browser window down still shows the header but otherwise on mobile the heading image doesn’t load at all.
Thanks for reporting it P-Mort are you talking about the blog page or the codepin? You can try accessing codepin directly http://codepen.io/fabriceleven/pen/gaWMqm
Hey Alex,
It was the actual blog page. Seems like the header image is trying to load but just hangs (you can see a sliver of the content underneath as you scroll but the header is kind of forced into place and never loads beyond there). The codepen works fine though, just tried it out.
Yeah you are right, we had our site cached so we didn’t see it. Thanks for reporting it, its all fixed now 🙂
I wanted to test this on mobile but the site seems to hang on mobile Safari. Scaling the browser window down still shows the header but otherwise on mobile the heading image doesn’t load at all.
Thanks for reporting it P-Mort are you talking about the blog page or the codepin? You can try accessing codepin directly http://codepen.io/fabriceleven/pen/gaWMqm
Hey Alex,
It was the actual blog page. Seems like the header image is trying to load but just hangs (you can see a sliver of the content underneath as you scroll but the header is kind of forced into place and never loads beyond there). The codepen works fine though, just tried it out.
Yeah you are right, we had our site cached so we didn’t see it. Thanks for reporting it, its all fixed now 🙂
Are these delayed animations help with loading page, if someone has very slow internet connection? If not, what will he see, if element doesn’t load on time, when animation should trigger?
They are delayed based on a timer. They are loaded with your css file so it’s one of the first things that’s loaded so don’t worry about them not showing up.
Are these delayed animations help with loading page, if someone has very slow internet connection? If not, what will he see, if element doesn’t load on time, when animation should trigger?
They are delayed based on a timer. They are loaded with your css file so it’s one of the first things that’s loaded so don’t worry about them not showing up.
Hi.How can I give different animation to each image with infinite iteration??? Like first one will zoom in, second one will fade in and third one will slide in from right.
And infinite iteration means when all images finish loading, it should start from beginning again.
Hi.How can I give different animation to each image with infinite iteration??? Like first one will zoom in, second one will fade in and third one will slide in from right.
And infinite iteration means when all images finish loading, it should start from beginning again.
Hi there,
i’m interested in how you perform you animation similar to the one that your homepage demonstrates.
Hi there,
i’m interested in how you perform you animation similar to the one that your homepage demonstrates.
Thanks for the tut! I needed something just a bit different, but your example set me in the right path.
Thanks for the tut! I needed something just a bit different, but your example set me in the right path.
Very useful, thank you!
Very useful, thank you!