The Ultimate CSS Animation Series Part 1: Transform Basics

CSS Animation series thumbnail
Designed by Author

🧬 Course Overview

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

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

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

We’ll cover the following:

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

🤷‍♂️ What is CSS Transformation?

🚙 2D Transformations

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

one line explanation of CSS transform properties on a whiteboard image
Designed by Author
  • 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

“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.

5 Quizzes of this series
5 Quizzes of this series

⛳ Next

Feel free to comment below if you get stuck or something. Because your single comment may help a lot of developers who are taking this course.

Also, I’m always here to help you. I’m going to post inspiring programming courses for free.

Thank you for your reading and Happy Coding!

--

--

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
Shahan Chowdhury

Think different • learn different | Core Teachings: JavaScript • Python | Watch from Programming with Shahan on https://www.youtube.com/programmingwithshahan