Skip to content
Sign upLog in
← Back to Community

Detailed guide to CSS Animations and Transitions

Profile icon
Nathanielx3rd

Every one of us gets awestruck when we look at the exquisitely designed websites of tech biggies, like Apple or Microsoft, or of automobile companies like Tesla or Mercedes.

The X-factor that makes these websites stands out, is oftentimes the appealing animations and effects that make us look again and again.

So, how do they make the websites so amazingly interactive?
Ever gaped about how the animations on these websites actually work? Do you wish to design a similarly elegant and interactive website for your business too?

If yes, then look no further. Read along as this is an extensive excerpt covering the basics of CSS animations and transitions that could immensely help you in achieving the same for your business website.

If you have just ventured into the domain of front-end development, or are looking to expand your understanding about the same, then continue reading this blog, because by the end of it you’ll get a comprehensive understanding of CSS.
CSS or Cascading Style Sheets is the pretty part of web-applications you get to notice.

While CSS styles the web application, HTML or Hypertext Markup Language structures it.

Animations play a critical role in improving the experience of users as they assist in providing improved visual feedback and helps in making interactions with the website striking. CSS 3 has an abundance of in-built properties that substantially help in animating elements, and that too across all the major browsers.

But — With great power, comes greater responsibility.

Animations need to be used wisely, or you could end up creating a page that is more distracting than interactive. The entire purpose of animations is to serve as an aid, rather than a hindrance while using web applications.

According to a Google report, almost 50% of the overall web traffic comes through mobile devices. Hence, any business needs to create mobile-friendly animations.

It is also imperative to have a basic understanding of CSS (preferably CSS 3), HTML and somewhat of jQuery. jQuery is a Javascript library that assists developers in playing with elements of the website. The technical jargon for this is — DOM manipulation.

As your target audience might vary, it is possible that you might be using more than one kind of web browsers (Mozilla Firefox, Google Chrome, Safari, Opera, Internet Explorer), and thus need to cater to all of them.

CSS animations have 3 significant aspects to it:

  1. Transforms
  2. Transitions
  3. Keyframes

PART A: TRANSFORMS

Transforms helps to change your web elements in all kinds of wonderful ways — from moving the element to re-sizing it, from rotating the element to tilting it.

And the best part — You can alter anything and everything without changing the document flow.

There are four significant aspects of transforms:

  1. Translate
  2. Scale
  3. Rotate
  4. Skew

Let’s dig a little deeper, shall we?

1. Translate

image

Translate changes the coordinates of the element. It is used to change the appearance of the component on a 2D plane.

Translate means to simply move the element from one position to another on the webpage. You can translate an object on X-axis, Y-axis or both.

/* Moves the element on the X-axis */ transform: translateX(200px); transform: translateX(-200px); /* Moves the element on the Y-axis */ transform: translateY(200px); transform: translateY(-200px); /* Using shorthand */ transform: translate(x-axis, y-axis) transform: translate(200px, 200px); /* Alert! */ transform: translate(200px); [will only translate the element along the X-axis]

2. Scale

image

One can play with the size of the image, along with both the axis — X and Y. Scaling distorts the shape of the element and can degrade the quality of the element. A number greater than 1 will increase the size and a decimal less than 1 will decrease the size.

/* Scaling along the X-axis */ transform: scaleX(3); /* Scaling along the Y-axis */ transform: scaleY(0.5); / *Using the shorthand - for scaling along X and Y axis together */ transform: scale(3 , 0.5); or transform: scale(0.5);

3. Rotate

You can rotate the element either clockwise or counter-clockwise. The unit of measurement used is degrees. A positive value will rotate the element clockwise, and vice versa for the negative element. This rotation would also happen along X, Y and Z axis.

image

Understanding the rotation in CSS animations is one of the trickiest parts, and thus a lot of people fails to utilize the real potential of this feature.

Along X-axis
Imagine a marshmallow getting roasted while being rotated on a bonfire. You have to visualize the elements to turn into the page along with the X-axis, and that’s what rotation will look like on X-axis.

We won’t see the 3D rotation, all we would be able to see is the height of the element changing.

transform: rotateX(45deg);

Along Y-axis
Imagine a dancer on a pole. The elements will be rotating into the page along Y-axis. All you would notice is the width of the component getting changed.

transform: rotateY(45deg);

Along Z-axis
This is the best possible orientation that you would work with while using rotation, as you can see the element actually rotating. One can also modify the clockwise and counter-clockwise movement with positive and negative rotation values respectively. For this, try imagining an arrow going into the page and the element rotating with respect to that arrow.

transform: rotateZ(45deg) /* clockwise rotation */ transform: rotateZ(-45deg) /* counterclockwise rotation */

4. Skew

image

Skewing an element means tilting the component. It has both positive and negative values, and like rotation, it is measured in degrees (deg) too.

Positive X value bends the element to the left, and vice versa for the negative X. Likewise, a positive Y value dips the element downwards, and vice versa. By default, if X or Y aren’t stated in the transform, it will shift the element with respect to the X-axis.

/* Along X-axis */ transform: skewX(45deg) or skew(45deg); /* Along Y-axis */ transform: skewY(80deg);

5. Combining transforms

One can also apply multiple transforms into a single transform statement. The order does matter (sometimes) as the second transform will apply on the first transform and the third will apply on the result of the first two transforms.

image

transform: translateX(200px) rotateX(45deg) scaleY(1.5) skewX(45deg);

All of these transforms will take effect on some user event like hover, click, focus, active, etc. To see the magic in action, you can add the transforms in these events.

.element-to-animate { display: block } .element-to-animate:hover { transform: translateX(200px) rotateX(45deg) scaleY(1.5) skewX(45deg); }

PART B : TRANSITIONS

IMAGE

If you got a chance to go over the code above, you might have noticed a jerk during the state change on hover; that’s precisely what transitions are for. Transitions help in making the animation fluid.

One can control the transitions with the help of the following properties:

transition-property transition-duration transition-timing-function transition-delay

1. transition-property

These are the CSS properties that one can use transitions on. This ranges from playing with margins and paddings to background and borders. You can either apply a transition to a specific feature or to a complete list. A comprehensive list of all the properties that come under this purview can be found here.

Applying transition property to a specific CSS property

transition-property: background-color;

Applying a transition to the entire list of CSS properties

transition-property: all;

2. transition-duration

The time duration for which the animation will be in play. This can easily be measured in seconds (s) or milliseconds (ms). It is advisable to use seconds as it makes them easily readable — even your fellow developers at the office won’t get annoyed by you!

transition-duration: 0.5s;

3. transition-timing-function

Who doesn’t like SPEED!
Speed is something that can make or break the user experience with your animation; therefore it is advisable to control it. The way you can accomplish it is by using transition-timing-function.

My friends from the Codecademy team were kind enough to provide me with some in-built values for speed, like ease, ease-in, ease-in-out
And in case, you wish to possess total command over the speed — Use Bezier Curves.

transition-timing-function: ease; transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

4. transition-delay

This helps in creating a pause between the event getting fired that starts the animation and the actual start of the animation. Simply put, transition-delay — delays the animation. It is measured in seconds (s) or milliseconds (ms).

transition-delay: 0.5s; /* Shorthand: */ transition: (property) (duration) (transition-timing-function) (transition-delay);

The order for the two time-oriented functions, i.e. duration and transition-delay matter — So stay alert!

Using Transforms and Transitions Together

image

STATE 1: NORMAL

.element-to-animate { display: block; transition: transform 1s ease 0.2s, background 1s; }

STATE 2: HOVER

.element-to-animate:hover { background: black; transform: translateX(200px); }

For transitioning between STATE 1 and STATE 2, one can apply the transition to all the properties separately with individual timings, or if you wish to apply transitions on all properties in STATE 2, then:

transition: all 1s ease 0.2s;

PART C: KEYFRAMES

image

The keyframes help in changing the animation from one to another at certain times.

One can play with keyframes in two ways:

  1. From — To approach
  2. Percentage Approach

1. From — To Approach

In this approach, there are only 2 states during the animation — start state and end state.

@keyframes animation_name { from { } to { } }

To animate an element (e.g., a Car) to move horizontally from its initial position:

@keyframes drive{ from { transform: translateX(-200); } to { transform: translateX(1000px); } } .car{ animation-name: drive; animation-duration: 3s; animation-fill-mode: forwards; animation-delay: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in; animation-direction: normal; }

2. Percentage Approach

We cannot use from-to in @keyframes as there is more than 1 state now. The percentage approach breaks down the animation into various intermediate states including a start and end state. The start state is indicated by 0%, and the end state is indicated by 100%. There can be as many intermediate states you want, but it is advised to keep the segregation of states uniform throughout.

Example: 0%25%50%75%100%

@keyframes jump{ 0% { transform: translateY(-50px) } 50% { transform: translateY(-100px) } 100% { transform: translateY(-50px) } }

• Animation shorthand

One can also use this concise format to write the animations:

animation: (animation-name) (animation-duration) (animation-fill-mode) (animation-timing-function) (animation-iteration-count) (animation-direction) (animation-delay);

Note: The animation-delay will always come AFTER animation-duration. Apart from them — time-oriented functions and the order of other properties in shorthand doesn’t matter.

Example:

.car { animation-name: drive; animation-duration: 3s; animation-fill-mode: forwards; animation-delay: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in; animation-direction: normal; }

Can be re-written as:

.car { animation: drive 3s ease-in infinite normal 2s; }

We now have two animations — drive and jump, which we wish to add on the “car” element. We can do this through a single line code by using, “Chaining Animations.”

• What is Chaining Animations?

Playing with multiple animations is a breeze with CSS. Comma separation technique can be used to chain the animation and run one animation after the other. For example,

.car { animation: drive 3s ease-in infinite normal 2s, jump 2s ease 4 alternate reverse; }

Classifications of Animation Properties:

Which Animation to use?
animation-name: Name of the animation which is indicated by the keyword after @keyframes

What to do when the animation ends?
animation-fill-mode: Tells what to do with the element being animated outside the animation window.

If you wish to repeat the animation “n” number of times, use,
animation-iteration-count:
It helps to repeat the animation. It can either have a number value or if you want the animation to play continuously, then use “infinite.”

If you wish to reverse the direction of the animation, use,
animation-direction:
You don’t need to write a separate animation all together just to reverse the animation. You can apply this to play with the current animation, and it’s direction.

/* In From – To Approach: */ reverse: to - from alternate: from-to -> to-from -> from-to alternate-reverse: to-from -> from-to -> to-from /* In Percentage Approach */ reverse: 100% - 0% alternate: 0% - 100% -> 100% - 0% -> 0% - 100% alternate-reverse: 100% - 0% ->0% - 100% ->100% - 0%

Like SPEED? Control it using,
animation-timing-function
helps to control the speed with which the animation starts, behaves and ends. There are some in-built values like ease, ease-in and you can write your own using the cubic-bezier(n,n,n,n). Play with it here.

Do you procrastinate? CSS animations can too!
Using animation-delay will start the animation few seconds/milliseconds after the event gets fired.

Conclusion

If you made it this far I salute you. Thanks for reading this explanation by me. If you have a question or want to add something leave a comment and I will 100% get back to you.

Keep on coding 🙃

Voters
Profile icon
WJDoonan
Profile icon
RBGoat
Profile icon
GalaxyInk
Profile icon
MattDESTROYER
Profile icon
MaxwellHenderso
Profile icon
rickysong
Profile icon
CodingElf66
Profile icon
jihhyuu202
Profile icon
JiayiLiu4
Profile icon
danielmendez10
Comments
hotnewtop
Profile icon
ch1ck3n

Animations are underrated

Profile icon
Nathanielx3rd

Hey

@ch1ck3n
, Yes I totally agree people don't realize how much work goes into making something simple. (Big fan of descord btw)

Profile icon
Bookie0

Really great tutorial! Perhaps add a repl with a few examples to illustrate the animations? :D

Profile icon
Nathanielx3rd

OMG

@Bookie0
!!! I'm a huge fan of your work! Yes 100% I will make a repl to show some examples. Thank you so much for the updoot and the comment :)

Profile icon
Bookie0

@Nathanielx3rd
Lol np, have fun! :)

Profile icon
Nathanielx3rd

Thanks

@Bookie0
I have spent all afternoon searching for inspiration! 0_0

Profile icon
Bookie0

@Nathanielx3rd
You could just use the code you've already written in the tutorial for examples, and add some other bits.

Profile icon
Nathanielx3rd

Hmmmmmm....

@Bookie0
, You know we could collab on this :D

Profile icon
Bookie0

@Nathanielx3rd
Maybe, I'm quite busy these days so I won't always be on

Profile icon
Raegan2

CSS transitions allow you to change property values smoothly, but they always need to be triggered like hover CSS animation allows animation of HTML elements, unlike transition which only performs a point A to point B operation but can also make many more operations in between.

Profile icon
Clarence3215

Searching for a similar issue. Caught your string. Much obliged for making it. Searching forward for arrangement.

paycheckrecords

Profile icon
rickysong

even after I tried I still got an error :P https://replit.com/@rickysong/Css-Test#style.css

Profile icon
Nathanielx3rd

Hey

@rickysong
so you just typed the code in the editor you didn't say what the css has to be applied to

someRandomElement { animation: animate 10s infinite; } @keyframes animate { 0% { transform: translateX(200px); } 10% { transform: translateX(-200px); } 20% { transform: translateY(200px); } 30% { transform: translateY(-200px); } 40% { transform: translate(x-axis, y-axis); } 50% { transform: translate(200px, 200px); } 100% { transform: translate(200px); } }

Also at the end of each css tag you need to put a ;

:D Hope it was helpful. You can add me to your repl and I will help you.

Profile icon
rickysong

@Nathanielx3rd
o ok thanks :D

Profile icon
Nathanielx3rd

@rickysong
no problemo