CSS Animation Tutorial — 1

Welcome to a brand new series on CSS animation. While creating my earlier series CSS3 in 10 days, i did some animations and got hooked with them. So, decided to create a CSS animation tutorial.

This series is inspired by this awesome youtube series by The Net Ninja.

We will start with learning a bit about CSS animation and then creating some cool animations.

So, go ahead and create an index.html file and put the below code. It is just showing a cloud image.

CSS Animation

We will then have a style.css file, which will contain the basic styles.

Basic styles

It will show this nice centered cloud in our webpage, with light blue background.

Cloud image

We will first learn about transform. A 2-dimentional transformation is applied to the element, through the transform property.

It have got many other properties. We will first learn about translate properties. The translateX moves the element on the x-axis.

Add the below in our style.css.

translateX

And it will move our cloud by 120px on x-axis i.e. to the right.

Moving along x-axis

Similarly, a negative unit will move to the left on the x-axis.

negative translateX

Will show as below.

Moving along x-axis

Now, as you might have guessed — The translateY moves the element on the y-axis.

Below is a positive translateY.

positive translateY

And it will move the element down.

Moving along y-axis

Similarly, a negative translateY.

negative translateY

Will move the element up, which can also result in image getting cut.

Moving along y-axis

We can move the element in, both x-axis and y-axis by passing two values in translate.

translate

Will result in below.

Moving along x-axis and y-axis

Next, we will look into scale. It basically stretches or shrinks an element.

First, we will look into scaleX which stretches or shrinks an element, along x-axis.

scaleX

It will stretch 1.5 times along x-axis.

x-axis

Now, scaleY stretches or shrinks an element, along y-axis.

scaleY

It will shrink the element 0.5 times along y-axis.

y-axis

We can also use to scale on both axis by using scale.

scale

It will scale on both axis.

On both axis

Next, we will look into the transform property of rotate. It rotates the 2-D element, along x, y or z-axis.

We will see rotateX first, which rotates the element along x-axis.

rotateX

It is sort of difficult to visualize, as the image got smaller. But it actually is rotating along x-axis so, it became smaller to human eyes.

Along x-axis

Similarly, rotateY will rotates the element along y-axis.

rotateY

Will show below.

Along y-axis

Now, rotateZ will rotates the element along z-axis.

rotateZ

It is more easy to visualize as it rotate along z-axis.

Along z-axis

We can also chain all three transform properties, which we learnt together like below.

All together

It will apply the result of one property on the other. First will rotate, the translate and then scale.

transform together

Next, we will learn transition property. Add a new circle to index.html

New element

Also, add some styles for this circle in style.css

New style

It will show as below in browser.

New element

Now, let add a hover state on the circle.

Hover state

As we can see from below, only the background changes and the transform doesn’t shows. This happens because the state change happens instantaneously.

only background

Now, if we put a transition of 1 sec in the parent element it will apply all hover state transition, smoothly in 1 sec.

transition

Now, it will change both background color and rotate 360 degrees.

Both hover states applied

We can also have background and transform, transitions to take different time. We have to add code like below.

transition differently

Now, the background changes in 1 second but the rotate happens more quickly.

Quick rotation

We also have two other properties in transition. They are transition-timing-function and transition-delay.

Now, the transition-timing-function specifies the speed at which the transition happens.

And the transition-delayspecifies the delay after which the transition should start.

Now, in the below example transition: 1s ease-in 0.8s; means apply the transition for 1 sec, with function ease-in and after a delay of 0.8 sec.

All properties

It will show the transition as below.

The complete transition

Now, there are some other transition-timing-function like below-

• ease — specifies an effect with a slow start, then fast, then end slowly (this is default)

• linear — specifies an effect with the same speed from start to end

• ease-in — specifies an effect with a slow start

• ease-out — specifies an effect with a slow end

• ease-in-out — specifies an effect with a slow start and end

You can try them all, but the most used one are linear and ease-in.

This completes the part 1 of the series. You can find the code for the same here.