Don’t have time to read? Just skip and add this css to yours and you can start using it right out of the box.
See the Pen QjZjPG by Alex (@fabriceleven) .
How it works
We have a trigger that needs to be added anytime animation is to be used. We set it to be animate and it looks like this
/*=== Trigger ===*/ .animate { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
Then we have delay, for example: (you can modify it to be whatever you want)
.one { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s; }
And finally the rest is just the animation itself. It consists of @keyframe that tells what’s changing and how, as well as the keyframe pointer.
@-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /*--keyframe pointer --*/ .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }
That’s all you need to create these animations! So your html might look like this:
<div class="box animate fadeInUp one"> Going up </div>
First class is just to style our object, second is the trigger, then animation name followed by an optional delay.
Final CSS you can just copy and paste to yours
The below css has the following animations: fadeIn, fadeInDown, fadeInUp, fadeInLeft and fadeInRight . Just add this CSS to the bottom of yours and you can start using them just like in our example. More run down how this works and creating custom animations is in our original tutorial.
/*=== Basic box styling ===*/ .box { background: #23a3d3; width: 150px; height: 70px; padding: 20px; text-align: center; color: white; border-radius: 7px; float: left; margin: 4px; font-family: 'helvetica'; text-transform: uppercase; } /*=== Trigger ===*/ .animate { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /*=== Optional Delays, change values here ===*/ .one { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s; } .two { -webkit-animation-delay: 1.7s; -moz-animation-delay: 1.7s; animation-delay: 1.7s; } .three { -webkit-animation-delay: 2.3s; -moz-animation-delay: 2.3s; animation-delay: 2.3s; } .four { -webkit-animation-delay: 3.3s; -moz-animation-delay: 3.3s; animation-delay: 3.3s; } /*=== Animations start here ===*/ /*=== FADE IN ===*/ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } /*=== FADE IN DOWN ===*/ @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } /*==== FADE IN UP ===*/ @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } /*=== FADE IN LEFT ===*/ @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } /*==== FADE IN RIGHT ===*/ @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }
The only limitation of this is that it only animates once. So if you have a lot of these on a page and some below the fold, even though you have added a delay they might get executed before user actually sees them. The solution is to have these animations come in as user scrolls all you need is include 1 small js file and you are set (you can still use the above tags you just will use a different trigger word other than animate, see our tutorial
Let us know how you are using this! Again remember to not overdo it, fadeIn and fadeInUp look the best (you can see it on our about us page as you scroll).