CSS Animation Tutorial — 1

Image for post
Image for post
Photo by Irvan Smith on Unsplash

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.

Image for post
Image for post
CSS Animation

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

Image for post
Image for post
Basic styles

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

Image for post
Image for post
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.

Image for post
Image for post
translateX

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

Image for post
Image for post
Moving along x-axis

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

negative translateX

Will show as below.

Image for post
Image for post
Moving along x-axis

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

Below is a positive translateY.

Image for post
Image for post
positive translateY

And it will move the element down.

Image for post
Image for post
Moving along y-axis

Similarly, a negative translateY.

Image for post
Image for post
negative translateY

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

Image for post
Image for post
Moving along y-axis

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

Image for post
Image for post
translate

Will result in below.

Image for post
Image for post
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.

Image for post
Image for post
scaleX

It will stretch 1.5 times along x-axis.

Image for post
Image for post
x-axis

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

Image for post
Image for post
scaleY

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

Image for post
Image for post
y-axis

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

Image for post
Image for post
scale

It will scale on both axis.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
Along x-axis

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

Image for post
Image for post
rotateY

Will show below.

Image for post
Image for post
Along y-axis

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

Image for post
Image for post
rotateZ

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

Image for post
Image for post
Along z-axis

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

Image for post
Image for post
All together

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

Image for post
Image for post
transform together

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

Image for post
Image for post
New element

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

Image for post
Image for post
New style

It will show as below in browser.

Image for post
Image for post
New element

Now, let add a hover state on the circle.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
transition

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

Image for post
Image for post
Both hover states applied

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

Image for post
Image for post
transition differently

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

Image for post
Image for post
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.

Image for post
Image for post
All properties

It will show the transition as below.

Image for post
Image for post
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.

You can find part 2 here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store