How to make animations in HTML using CSS only

 ANIMATIONS: NOT JUST FOR THE ADVANCED

Background - You can skip this 

Background- Skippable but nice to know 

No background - Need to read

Background- Important

Grey text - comment

Important note: I have written this entire topic in one blogpost so that you can easily refer to it whenever you want and so that I didn't just forget and put it off , but I would highly recommend reading this blogpost in a span of 1 week to completely learn and absorb the information

If you know anything about coding you know that to make animations in HTML , you need another coding language and the most common one used is JS , short for javascript.

But, if you are a beginner who has just learned html , learning another coding language (yes, I am aware that HTML is not a programming language) all over again is a huge pain, especially if you are already struggling to understand HTML and CSS.

Also a few animations in general need CSS so it's important to learn all of this.

Without further ado , let's get started!

For CSS animations , you don't need JS and can change styles over time. They are used for movements like fading , rotation, etc.

There are 2 parts to a css animation : @keyframes and animation.

@Keyframes

**NOTE:None of these are properties that "belong" to @keyframes ; they are general CSS properties that are usually used in @keyframes.**

This defines what changes during the animation or the steps of the animation.

We generally use percentages but you can also use from or start to define the steps. 

What I mean by use percentages is basically:
0% - Start of the animation 

50% - halfway through the animation 

100% - end of the animation. 

You can add how many ever percentages you want. 

Coming to the properties in @keyframes , there isn't technically a fixed number since what it actually defines is 

At 0% it looks like ABC and at 50% it looks like XYZ. 

but I will mention the most used ones:

1.Transform

This allows for rotation , movement and scaling and is what most people imagine when they think of CSS animations.

Example:
@keyframes XYZ {

transform: translateX(50px) ; /* this will move the object 50px on the X axis or horizontally right while moving it 50px on the Y axis would move it down 50px */

transform:rotate(45deg) ;

transform:scale(1.2);}

What it means to scale: The CSS property ; "scale" , simply makes the object bigger or smaller. 

The syntax is : transform:scale(value)

If the value is 1 , it remains the same size. If it is smaller than one , then it reduces size and if it is bigger , then it increases in size. 

This means the value is relative , so 1.5 will make it 50% bigger and 0.75 will make it 25% smaller. 

 You can also scale the object in only one direction 

You can do this by using transform:scaleX or transform:scaleY

Example: 

transform:scaleX(2) /*Makes it twice as wide*/

transform:scaleY(0.5) /*Makes it half as tall*/

2.Opacity

This makes the opacity of the colour less and is used for fade in colour effects.

Example:

@keyframes Opacity{

0%{opacity:(1);}

50%{opacity:(0);}

}

The values for opacity are :

Value	Meaning

1	fully visible (100% opaque)

0	completely invisible

0.5	50% transparent

0.2	very faint / almost invisible

0.75	slightly transparent

3.Colour

You can change the text colour in the animation using this property . 

For example:

@keyframes textColour{

0%{color:red;}

100%{color:blue;}

}

You can do the same thing with background colour.

@keyframes backgroundColour{

50%{background-color:pink};

75%{background-color:magenta};

};

4.Width/Height

You use the width and height properties to create a growing or shrinking effect in your animation.

Example:

@keyframes shrink{

0%{width:200px;

        height:50px;}

75%{width:150px;

         height:100px;}

}

5.Border

.I will not be explaining the syntax for this but if you want to know the general syntax for keyframes it is 

 

@keyframes animation-name {

  0%   { property:value;}        /*starting state*/

  50%  {property:value;}        /*middle state*/  

  100% {property:value;}       /*ending state*/

}

Also you can name your animation anything ; it's generally recommended to name it something obvious so that if you need to use the code in the future , you know what effect you were going for. But it's completely your choice whether you want to name your animation moveSide or ShakirasHips.

As for border,

I haven't ever seen this in an animation but thought it would be helpful to some so I decided to add the  syntax instead of explaining. The most commonly used are border-radius(makes the edges rounder) and border-width(makes it wider or narrower.) If you want a actual , beginner-friendly explanation of  all the different border properties , stick around till the end for a surprise 😉

6.Filter

I think this is a perfect example of last but definitely NOT the least. Along with transform , this is one of my most used properties not only in @keyframes , but also as a general CSS property.

I think the filter property can be related to a Snapchat or photo editor filter. Just like you edit photos to be warmer , greyer , brighter , more blurred , etc ; filter in CSS can do the same thing!

Now let's go into the different properties of filter.

1. Blur(px)

This obviously blurs the object or puts it out of focus. 

Example:
filter:blur(5px);

To give you a picture , the general range used is 1px-10px

1-3px --> Slight blur

4-7px --> Medium Blur

8-10   --> Strong blur

You can also use higher px for a VERY DRAMATIC effect

       2.Brightness()

This makes the object brighter or darker and can be used for a flickering or glowing effect if you also use a blur.

The typical range for brightness is 0.5 - 1.5

0.5 -> half as bright(darker)

1 -> normal

1.2-1.5 -> brighter

2+ -> Very bright

        3.Contrast()

This increases the difference between the lights and darks in the object.

The typical range is 0.8 - 2.

0.8 -> slightly flatter (I generally don't recommend reducing the contrast in most cases)

1 -> normal

1.5-2 -> has more contrast so feels more punchy? I don't really know the word to describe it.

      4.Grayscale(%)

This removes the colour from an object so kind of the opposite of contrast(emphasis on kind of).

0% will not change the object at all while 100% will make it completely back and white.

     5.Sepia(%)

This increases the yellowish-brown tint in the object or makes it look more vintage.

0% → no sepia
20% → slight vintage warmth
40% → medium warm tone

60% → strong brown-golden tint

80% → very old-photo effect
100% → full antique sepia'

I would recommend not going till 100% because at that point it's no longer vintage, it's just ugly(in my opinion)

        6.Invert(%)

If you know anything about colour theory , you are well aware of the colour wheel. If you don't, this is how it looks like :

[If you read my blog , then you know that I am no stranger to the colour wheel but here is a reference you can keep for your coding too!]

What invert does is that it turns each colour to it's "negative" or the colour opposite of it on the colour wheel.

For example:

@keyframes invertColour{

0%{background-color:red;}

50%{filter:invert(80%);}

}

If I am being honest , start using the percentages from 50% because anything below 40% , just creates the effect of dulling down the colours and from 35%-48% it looks very muddy and grey.  

To give you a visual example of how this looks

This is 0%

And this is 100%

           

     

       

           7.Saturate(%)

Saturate can change how intense the colours in the object can look.

If it's 100% , that means the colours are completely unchanged.

0% means complete grayscale

<100% means that it is more muted or dull

>100% means that it is more bright and vibrant.

To give you a visual,

I purposefully chose slightly muted colours as 100% because otherwise 400%+ is EXTREMELY bright and neon.

           8.Hue-rotate(deg)

This is a very unique property in CSS that actually makes me want to go, "How did people even think of that?"

It basically rotates the colour around the colour wheel(I have shown the colour wheel in invert too)

It uses degrees as the value:

So as an example:
@keyframes gradientRotate{

0%{background-color:pink;}

100%{filter:hue-rotate(90deg);}

}

I know it's very hard to imagine this if you are not comfortable with colour theory so here are pictures to help you <3

 

5

  

Okay , guess what? We are done with @keyframes! This means you are at the halfway point of learning CSS animations!

Now let's start with the animation property: The heart of CSS animations!

 Before that, a short recap:

 @keyframes

Purpose: Defines the steps of the animation (how styles change over time).

Syntax:

@keyframes animation-name {
  0%   { property: value; }  /* start */
  50%  { property: value; }  /* middle */
  100% { property: value; }  /* end */
}

Steps:

• 0% → start

• 50% → halfway

• 100% → end

Commonly used properties in @keyframes:

1. Transform – move, rotate, scale

   transform: translateX(50px);
   transform: rotate(45deg);
   transform: scale(1.2);
   transform: scaleX(2);   /* width only */
   transform: scaleY(0.5); /* height only */
   

2. Opacity – fade effects

   opacity: 0;   /* invisible */
   opacity: 1;   /* fully visible */
   

3. Color / Background-color – text or background color changes

   color: red;
   background-color: pink;
   

4. Width / Height – grow or shrink elements

5. Border – commonly border-radius and border-width

6. Filter – image effects like blur, brightness, contrast, grayscale, sepia, invert, saturate, hue-rotate

Filter examples:

filter: blur(5px);
filter: brightness(1.2);
filter: contrast(1.5);
filter: grayscale(50%);
filter: sepia(40%);
filter: invert(80%);
filter: saturate(120%);
filter: hue-rotate(90deg);

Animation Property

Now we come to the core idea of CSS animations - the animation property! The animation property is actually a shorthand for 8 individual properties - but there are 6 really important ones!

The animation property defines how long , how many times and how the animation runs.

Now let's learn the different animation properties:

1.animation-name

The animation name specifies the name of the @keyframes you want to use. If you are confused by what this means , let's do a quick recap of the syntax of a CSS animation.

selector{ animation-name:XYZ;

               animation-duration:Xs;

               animation-iteration-count:Y;}

@keyframes XYZ{

0%{;}

100%{;}

}

This is ONE way of doing it. 

The other way of doing it is 

selector{animation: XYZ Xs Y;}

If you are still confused , don't worry , that is absolutely normal. You will understand what I mean as we learn all the properties. 

 Remember in animation-name , the animation-name must match the @keyframes name.

2.animation-duration

This defines how long the animation cycle is. The values for animation duration are 

Seconds(s)

and milliseconds(ms)

So what this means is that if I say that animation-duration:60s , then the animation will go from 0%-100% in 60 seconds.

3.animation-timing-function

This is the one where beginners get the most confused (at least , I did) This is because it defines the speed curve of the animation - don't get confused with jargon though , I will explain this very well.

The speed curve of the animation is basically how fast the animation progresses between keyframes.

Not what happens , but how fast it happens.

A good analogy of this is a car. I will be using the example of a car to explain the different values in animation-timing-function.

1.  Linear - This is when the speed between different keyframes is constant. Imagine driving a car on a smooth road , no traffic at a constant speed (a dream , I know 😣). You will use this for loading bars, loaders and marquees.
2.  Ease - This is the default animation-timing-function in CSS. Imagine you are driving a car slowly and then suddenly press the accelerator to go faster. When you come close to your destination , you put your foot off of the accelerator and slowly press the brakes. The ease function works the same way - it starts slow , goes quicker and then slows down again at the end. We use this for hover effects, cards sliding into view , etc
3.  Ease-in - Imagine you are pulling out of the parking/driving in a 10k/ph zone. You start by driving slowly. Once you exit this area , you will go much quicker. In a ease-in function , the animation starts slow and goes faster(similar to ease , but it doesn't slow down at the end).Used generally for popups and dropdowns appearing.
4. Ease-out - This is the exact opposite of ease-in. Imagine you are driving at 60km/ph. You have to brake suddenly as you reach your destination. Same logic here. The animation starts very fast and becomes slower towards the end.We generally use this for modals closing , or dropping animations.
5.  Ease-in-out - I think this can be compared to a swing. When you start swinging , you start slowly. You become fast and after some time when you have to stop , you slow down. This is the same thing as ease. In the ease-in-out function , you start slowly go fast and slow down again at the end. Carousel slides , scrolling pages , interactive cards - it all comes down to this.
6.  Cubic-bezier - I think this is the most complex out of all of them to learn and it seems really confusing but honestly , it's really simple. 

          Cubic bezier is when you plot out your own speed curve for the animation. 

          The syntax is: animation-timing-function:cubic-bezier(x1,y1,x2,y2). The X axis refers to the time and the Y axis refers to the acceleration.

           To figure out how the curve will be , it is helpful to imagine cubic bezier as a tiny graph. 

            The X axis(horizontal) represents time and the Y axis(vertical) represents speed. You can NEVER change the start or the end: start is 0 and the end is 1. 

           What you can control are only two points : (x1,y1) and (x2,y2). The x1 , y1 , x2 and y2 are points but they are paired together to form coordinates which are (x1,y1) and (x2,y2)

. It should be noted that the speed curve does not pass through the coordinates but rather the coordinates influence the speed curve. It is better to use a graph to plot cubic-bezier (though it is not necessary) because you can clearly visualize it. Where the curve is steeper, the rate of change is faster; and where the curve is flatter, the rate of change is slower. 

To plot your own cubic bezier graph and visualize how it looks, there are 3 simple steps.

1. Decide 4 points : Decide 4 points p0 , p1 , p2 and p3. P1 is the start point or where the curve starts and p3 is the end point or where the curve ends. P1 and p2 act as our "control handles"; p1 influences the curve's direction leaving p0 and p2 influences the curve's direction arriving at p3.
2. Making the "polygon": This isn't exactly a polygon but the second step is to connect the dots together to form a shape. This is your control polygon.
3.  Making the curve: The final step is to draw a smooth curve that is influenced by your control polygon's shape. 

Ta-da!! You have planned your cubic-bezier curve and know exactly how it looks.

To know what values the points should be , you should do the above steps on a 1 x 1 graph.

7.Steps(n)

This feels like climbing steps. It is not smooth at all and is somewhat choppy? Though I don't really know how to describe it. The more steps you keep , the less happens in each step. We usually use this is sprite or animations that feel like going up or down and are meant to clearly show a difference.

 💡 Here is a memory trick:

• Enter → ease-in

• Exit → ease-out

• Background or loading → linear

• Polish → ease-in-out

• Choppy / steps → steps(n)

• ANYTHING in between → cubic-bezier

4.Animation-delay

Animation-delay determines how long your browser should wait before starting the animation. 

Let me explain: Most animations need to have a trigger. Animation-delay determines whether you have to

wait 1 second or 5 milliseconds after the trigger is initiated.

There are 3 types of values you need to know : positive , negative and zero.

Positive

Positive means that whatever you value you pick is how long the browser waits before starting the animation.Eg. animation-delay:2s;

                        animation-delay:15ms;   /*ms stands for milliseconds and s stands for seconds*/

Zero

Zero means that the animation starts immediately with no delay.

Eg. animation-delay:0s

Negative

Eg.animation-delay:-1s;

This starts the animation as if it had already been running for one second or it skips 1 second of the animation.

5.Animation-iteration-count

As the name suggests, animation-iteration-count determines the number of time an animation cycle plays before stopping. For example; animation-iteration-count:3; means that the animation will play out 3 times before stopping. If you want a continous animation, you can also do animation-iteration-count:infinite; which will make the animation play out without any end.

You can also use fractions or decimals and by doing this you will play out a part of the animation.

💡Tip: Mix an' mash

When using animation-iteration-count:value=decimal; , you can pair it with animation-delay:value=negative; to create a staggered effect!

6.animation-direction

The animation-direction property determines from which keyframes the animation starts. You will understand this better as you read on:

1. Normal  : This is the default animation-direction and means that it starts form 0% and ends at 100% .
2. Reverse : This is the opposite of normal and means that your animation starts from 100% and ends at 0%.
3. Alternate: Remember animation-iteration-count?Well, what alternate does is that the first iteration will be normal or forwards and the second iteration will be reverse or backwards. So all odd number of cycles will have 0% → 100% and all even number cycles will have 100% → 0%.
4. Alternate-reverse: This is the opposite of alternate. Here , the first iteration is in reverse or backwards and the second iteration is normal or forwards. That means all odd number cycles will be 100% → 0% and all even number cycles will be 0% → 100%

The lesser important animation-properties

Remember in the beginning I had told all of you that though there are 8 animation properties only 6 are truly important to learn? Well , I am happy to inform you that you have learnt the 6 major animation properties! Now, I am still going to teach you the 7th and 8th properties , so if you wanted to learn them , you can!

    

7. Animation-fill-mode 

Remember how I had explained trigger in animations? Well what animation-fill-mode does is determine what effects of the animation the object should retain before and after the animation period. By default, the effects of an animation are only present during the animation period but this helps you extend it. 

1.None: This is the default and means that no styles will be applied before and after the animation.

2.Forwards: This is the most used and keeps the last keyframes even after the animation. You can use this for effects when something fades in but is not supposed to leave.

3.`Backwards:This is when the first keyframes is applied during the animation-delay period. 

4.Both: Though this sounds confusing , it's pretty simple. During the animation-delay , the first keyframes is applied(backwards) and after the animation the last keyframes continues(forwards)

8.Animation-play-state

This is basically a pause/play button for your animation.

Animation-play-state:running is the default and is when the animation is playing. 

Animation-play-state:paused is when your animation pauses or effectively stops for sometime before it is restarted with JS or :hover.

Example:

.box {

  width: 100px;

  height: 100px;

  background: pink;

  animation: grow 5s linear infinite;

  animation-play-state: paused;

}

.box:hover {

  animation-play-state: running; /* runs when hovered */

}

@keyframes grow {

  from { transform: scale(1); }

  to { transform: scale(1.5); }

}

In this animation, the box does not grow even once the animation begins. Once you start hovering over it , it grows.

These properties are not used much now days because of the better alternative of transition , which I will be releasing a blogpost about too!

Now that we have covered all the animation properties , it is important for you to remember that animation is a shorthand which means that instead of doing

.box{

animation-name:grow;

animation-duration:3s;

animation-timing-function:ease-in;

animation-delay:500ms;

animation-iteration-count:5;

animation-direction:forward;

animation-fill-mode:backwards;

animation-play-state:paused;}

You can just do 

.box{animation:grow 3s ease-in 500ms 5 forward backwards paused;}

Doesn't that save so much time?

Now to know what properties to know when, the general pattern is :

selector {

  animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];

}

Short recap of animation:

 Animation Properties

Purpose: Defines how an animation runs (duration, speed, repetition, etc.).

Tips / Memory Aids:

• Enter → ease-in

• Exit → ease-out

• Background / loading → linear

• Polish → ease-in-out

• Choppy / steps → steps(n)

• Anything in between → cubic-bezier

• 


Property	What it does	Example
animation-name	Name of the @keyframes to use	animation-name: grow;
animation-duration	How long one cycle lasts	animation-duration: 3s;
animation-timing-function	Speed curve between keyframes	linear, ease, ease-in, ease-out, ease-in-out, steps(n), cubic-bezier(x1,y1,x2,y2)
animation-delay	Time to wait before starting	2s (positive), 0s (immediate), -1s (start mid-animation)
animation-iteration-count	How many times animation runs	3 or infinite
animation-direction	Animation playback direction	normal, reverse, alternate, alternate-reverse
animation-fill-mode	Styles before/after animation	none, forwards, backwards, both
animation-play-state	Pause/play animation	running (default), paused

---

 Animation Shorthand

Instead of writing all 8 properties separately

selector {
animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];
}

I hope this blogpost was useful to you and I will see you in the next one!

Make sure to comment down below what you thought of my post and share it with your friends 💋💌

Psst.... All of my followers will get freebies for interactive codes , border properties breakdown , and a HTML coded wishlist , bucketlist and planner for the new year + more bonuses.....Follow while the deal still is on.