The Ultimate CSS Animation Series Part 1: Transform Basics

4 min readMay 8, 2022

CSS Animation series thumbnail — Designed by Author

🧬 Course Overview

Did you ever feel like you are somehow good at designing simple websites using CSS but couldn’t create animated website content with your creative imagination that makes your website more inspirational & engaging to customers?

In this “The Ultimate CSS Animation Series” you are going to learn modern CSS3 animations that allow us to animate website content without using any JavaScript code. This is the reason why it’s an essential skill for front-end developers.

Developer setting down on the desk — Photo by Luke Peters on Unsplash

Course Requirement

This course is required very basic knowledge of CSS (e.g. able to change the background color using CSS). Although I will cover essential CSS concepts that will be needed for CSS animations.

After completing this course, you will feel confident to create any type of CSS animation project for your websites or clients. Because, at the end of each part of this series, I will put everything into practice to test your knowledge.

🩺 Why CSS Animations?

CSS animations is GPU-accelerated and it doesn't require JavaScript code to run. This is why CSS code run much smoother than any other web technology that you come up with.

CSS Code on laptop screen — Photo by Jeffrey Leung on Unsplash

So why not learn CSS Animations instead of using slow chaotic third-party libraries?

🧠 The “2–1” Method

Before getting started this course, there is one more thing. I want you to follow a smart learning technic that will help you to learn effectively from videos or articles in under 3 minutes.

arrows hitting target — Photo by Afif Kusuma on Unsplash

The human brain is designed to accomplish goals. On the other hand, a lot of programmers often get frustrated and then quit by trying to learn all things overnight without setting any simple GOALS.

To solve this problem, I created a smart system that will help you overcome procrastination and accomplish your learning goals one step at a time. I call this system the 2–1 method. Meaning 120s = theory + 60s = test/practice. This technic is much more effective for educational videos & articles. You will see that in minutes.

So I will discuss a single concept for 2 minutes and then immediately will put it into practice.

🚌 Part 1: CSS Transformation Basics

CSS transformation refers to one of the core CSS Animation properties called “transform”. In this series, we are going to learn the basic concept of this property right away.

We’ll cover the following:

🤷‍♂️ What is CSS Transformation?
🚙 2D Transformations
🕵️‍♀️ Explanation

🤷‍♂️ What is CSS Transformation?

CSS Transformations modify the coordinate space of the CSS visual formatting model on a 2D or 3D axis. In CSS we have a bunch of functions for transforming elements. The transform CSS property lets you rotate, scale, skew or translate an element.

🚙 2D Transformations

2D Transform property will animate an HTML object in 2D space.

You can use the following 2D transformation methods:

2D Transformation Methods list — Designed by Author

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

🕵️‍♀️ Explanation

Let’s discuss each of these functions a bit more. In the upcoming series, you will learn everything in full detail.

rotate() → Rotating an element
scale() → Making an element larger or smaller
skew() → To skew elements in a two-dimensional space (2D)
translate() → Used to reposition an element in the horizontal and/or vertical directions
matrix() → Combine all the above 2D transform functions into one property
x,y → Defines animating object along horizontal (x) or vertical (y) axis

Note: We will go through each of these properties in both 2D & 3D space in the coming series.

💡 Quizzes

Let’s test your knowledge of what you have learned so far.

“The person who don’t test his knowledge is like the one who never check his wedding clothes in the mirror”
― A Nameless Wise Men

Here is the online quiz game that I made purely depending on this series and here are the quizzes in the image format below.

Each question consists of 2 marks out of 5 questions. Don’t try to look at the answers before trying to solve yourself and let us know what is your score so far.