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 AnimationCSS Animation

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

Basic stylesBasic styles

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

Cloud imageCloud 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.

translateXtranslateX

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

Moving along x-axisMoving along x-axis

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

negative translateXnegative translateX

Will show as below.

Moving along x-axisMoving along x-axis

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

Below is a positive translateY.

positive translateYpositive translateY

And it will move the element down.

Moving along y-axisMoving along y-axis

Similarly, a negative translateY.

negative translateYnegative translateY

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

Moving along y-axisMoving along y-axis

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

translatetranslate

Will result in below.

Moving along x-axis and y-axisMoving 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.

scaleXscaleX

It will stretch 1.5 times along x-axis.

x-axisx-axis

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

scaleYscaleY

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

y-axisy-axis

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

scalescale

It will scale on both axis.

On both axisOn 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.

rotateXrotateX

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-axisAlong x-axis

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

rotateYrotateY

Will show below.

Along y-axisAlong y-axis

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

rotateZrotateZ

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

Along z-axisAlong z-axis

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

All togetherAll together

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

transform togethertransform together

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

New elementNew element

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

New styleNew style

It will show as below in browser.

New elementNew element

Now, let add a hover state on the circle.

Hover stateHover 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 backgroundonly 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.

transitiontransition

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

Both hover states appliedBoth hover states applied

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

transition differentlytransition differently

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

Quick rotationQuick 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 propertiesAll properties

It will show the transition as below.

The complete transitionThe 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.

This post is also available on DEV.