2014-06-24

CSS3 animation is a great new feature of CSS3. With this feature, it is possible to animate transitions from one CSS style to another. The introduction of CSS keyframes rule made it possible to have intermediate waypoints along the way of animation.

Compiling all of the useful CSS animations in one CSS library is a great idea but may take some time. Good thing there is already a prebuilt library that compiles all good CSS animations.

Introducing Animate.css, a free prebuilt CSS library, created by Dan Eden. It is consist of over 50 amazing, cross-browser CSS animations that save you from writing a little more lines of CSS to animate elements on your site projects.

Today, we’re going to check how we can apply cool animations using  this Animate.css tutorial. You can feature this animation in a landing page. Let’s get started!

Resources you need to complete this tutorial

Reset.css

Animate.css

Raleway (Google Font)

Open Sans (Google Font)

Flat Icons (You can choose any icon)

Background Images (You can use any)

Basic Knowledge of CSS animations

Time and Patience

Download Source Files
View Demo

Folder Structure



Our file structure will consist of an HTML file, images folder and a css folder:

index.html – this will serve as our main file

images folder – for our images

css – for our styles

What We Are Going to Build



Getting Started

Before we begin with our markup, we will add first the HTML5 doctype and series of links on our Head section. This will include our links to our CSS and Google font libraries.

The HTML

For our HTML, we will wrap everything with our ID wrapper.

Cover Section

For our Cover section, we will wrap everything within an ID of cover followed by our class container to center all elements on the screen. Next, we will create two columns and float them left and right.

Features Section

For our Feature section, we will do the same thing we did in the Cover section; however, this time, we will be dividing each column using class column and one-third.

Effects Section

For our Feature section, we will redo what we did in the Effect section. But this time we will be dividing each column using class column and one-fourth since we have four columns.

About Section

For this section, we’re going to wrap everything in class container.

Subscribe Section

For our Subscribe section, we’re going to do the same thing as in the About section. But this time, we’re going to insert a form for our text box and button.

Footer

Finally, let’s add our markup for footer. We will still wrap everything in a container class and center this on the screen later on using our style.css file.

So with this markup, it is expected you’ll have the same output like the image you see below.



The CSS

For our CSS code, let’s first add the general style for our basic elements such as the body, H2 and H3 tags.

Next, let’s add the styles for the containers and columns.

For the Cover section, give it a background image. Then, style each specific element inside our cover section.

Next, add style to the Features section. We will give it a background color of #38bc94 and color of white. We will also center all of the text on each column.

For our Effects section, let’s add a background color of #e9e9e9 and center all of the text.

Next, let’s style our About section.

Before we proceed on our Subscribe section, let’s first add styles to our forms. This will have a style for our text box and button.

Now, let’s add the styles for our Subscribe section. We will add a background image and give each form element width and height.

Finally, let’s add some styles to our footer.

Media Queries for Responsive Design

In order for our landing page work on different viewports, we need to customize some element style for a specific viewports using media queries. If you don’t know how media queries works, I suggest reading this article first. You can copy the code below and paste it in your CSS file.

Animating Elements with Animate.CSS

Now that we have our landing page is ready, let’s animate our elements. There is an “animated” class in the Animate.css file that will make the effects work. This means you will need to declare the animated class first along with the animation class. See sample code below.

For this tutorial, I’ve selected the following animation classes that I want to use all throughout the landing page; however, you can freely choose the animation classes you want to try out on the Animate.css demo site:

bounceInLeft

rotateIn

bounceInRight

lightSpeedIn

flipInY

bounceInDown

swing

shake

flash

bounce

tada

wobble

Animation Delay

For this part, we’re going to look how we can add cool animation with delay on our cover section.

First, on the H3 tag under the div with a class of fleft, I’ll add the animation class bounceInLeft. See code below.

Next, I’ll add the animation class rotateIn on our H2 class and the animation class bounceInRight on our paragraph tag. Check out the code below.

Finally, let’s put the animation class lightSpeedIn on our browser image under the div with a class fright.

Now to add animation delay on each element, you need to open Animate.css and put a one-second delay for each animation class placed on the elements above using the following code:

As an example for our bounceInLeft animation class, you’ll have the code below:

In the demo I created, you’ll notice that each element are not displaying at the same time. Put different time delays for each element since I added additional one second per element according to the order I prefer. See my codes below:

Animation Hover

For this part, we’re going to look how we can add cool hover animation on our features. First thing we need to do is to add our animation classes on the elements we want to animate. See the code below.

Notice that I added the animation class flipInY on the one-third div. You can apply this on the other one-third div for a similar animation.

Now to make our hover state animation effect, we need to add the hover pseudo class to the animation class we want this to take effect with. For this example, let’s apply it on class FlipInY.

In my example above, I also added animation-duration to control the time I want the animation to roll. Notice that I also used animation-fill-mode. This property specifies what styles will apply for the element when the animation is not playing.

By default, CSS animations will not affect the element you are animating until the first keyframe is “played”, and then stops affecting it once the last keyframe has been completed.

Now that you learn how to apply animation on hover state, you can add similar hover state animation with the other section on our landing page using the same process. You can play around with it and customize it.

Conclusion

There you have it! You can continue putting animation classes on different elements you want to animate. Check out and download the demo to see it in action.

Did you have a lot of fun playing around with this great CSS library? Do you think this will be a great tool? Leave a comment below and let us know what you think.

Show more