CSS Animations

Sneha Mallik
Last Updated: May 13, 2022

Introduction 

 

Animation property in CSS3(upgraded version of Cascading Style Sheet [CSS] ) is used to style the elements that change gradually over time. It makes the webpage more attractive and has a lot of variations that can be customized according to the interest of the user. 

 

CSS animations help in:

  • Making the movement of elements of the web page easier.
  • Spinning elements around, changing the color, size, shape, etc.
  • Eliminating the need for Javascript/ jQuery for a lot of animation effects.
  • Designing the webpage more interactively and is easy once we get the hang of it.

 

Prerequisites needed for this are: 

  • CSS
  • HTML
  • jQuery(optional)

 

Transforms

 

Transforms in animations allow us to visually manipulate an element by rotating, skewing, scaling or translating.

Values of transforms include:

  • scale()

 

It impacts the size of the element since it is applied to the font size of the element, padding, width and height. It also serves as a shortcut function for the scaleX and scaleY functions.

 

Example-

 

HTML:

<div class = "item">
    This is an example, we are starting with scale() 
    property which is 25px width and height is 25px. But 
    since we are using scale property, it will now scale up 
    to the element size. The padding, text and margins are 
    also affected by this property.
</div>

 

CSS:

.item{
    background-color: yellow;
    height25px
    width25px
    transformscale(15); 
    font-size1px
    padding1px
    color: black; 
    line-height2px;
}

bodyhtml{
    height100%
}

body{
    display: flex;
    align-items:  center;
    justify-content: center;
    padding0;
    font-family: Arial, Helvetica, sans-serif;
}

 

RESULT:

 

  • translate()

 

It helps in the movement of the element up or down and sideways too.

 

Example-

 

HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus unde, quis Eveniet corporis facere laboriosam voluptatem ad blanditiis, temporibus, laborum voluptate possimus beatae illo Illo molestiae, Illo blanditiis.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus unde, quis Eveniet corporis facere laboriosam voluptatem ad blanditiis, temporibus, laborum voluptate possimus beatae illo Illo molestiae, Illo blanditiis.</p>

<div class = "square">
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus unde, quis Eveniet corporis facere laboriosam voluptatem ad blanditiis, temporibus, laborum voluptate possimus beatae illo Illo molestiae, Illo blanditiis.</p>

 

CSS:

.square{
    height100px;
    width100px;
    background-coloryellow;
    display: flex;
    color: black;
    text-align: center;
    justify-content: center;
    align-content: center;
    padding8px;
    animation: hello 3s infinite;
    animation-duration: alternate;
}

@keyframes hello{
    0%{
        transformtranslate(0, 0);
    }
    100%{
        transformtranslate(25px, 55px);
    }
}

 

RESULT:

 

  • rotate()

 

Here, the element is rotated clockwise from the element’s current position.

 

Example-

 

HTML:

<div class = "item">
</div>

<div class = "item">
</div>

<div class = "item">
</div>

 

CSS:

.item{
    height100px;
    width100px;
    background-colorblue;
    display: inline-block;
    font-size1px;
    color: black;
    margin-right5px;
    margin-left5px;
    padding1px;
    animation: hello 3s infinite;
    transformrotate(35deg);
    opacity: .7;
}

@keyframes hello{
    0%{
        transformrotate(0);
    }
    100%{
        transformrotate(360deg);
    }
}

bodyhtml{
    height100%;
}

body{
    display: flex;
    align-items:  center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
}

 

RESULT:

 

  • matrix()

 

It is a function that will combine all the transforms into one and is most likely not intended to be written by hand.

 

Example-

 

This code of CSS

rotate(45degtranslate(24px, 25px)

 

Can be converted into this-

matrix(0.7071067811865475, 0.7071067811865476-0.7071067811865476, 0.7071067811865475, 0.7071067811865497, 34.648232278140824)

 

  • skewX() and skewY()

 

It helps in tilting an element left or right, for example- Turning a rectangle into a parallelogram which creates an impact of tilt from left to right. We can use skew() function instead of skewX() and skewY(), as skew() function allows both the values and is a shortcut function.

 

Example-

 

HTML:

<div class = "item">
</div>

<div class = "item">
</div>

<div class = "item">
</div>

 

CSS:

.item{
    height100px;
    width100px;
    background-colorred;
    display: inline-block;
    font-size1px;
    color: black;
    margin-right5px;
    margin-left5px;
    padding1px;
    -webkit-animation: hello 3s infinite;
    animation: hello 3s infinite;
    transformskew(20deg);
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    opacity0.7;
}

@-webkit-keyframes hello{
    0%{
        transformskewX(20deg);
    }
    100%{
        transformskew(-20deg);
    }
}

bodyhtml{
    height100%
}

body{
    display: flex;
    align-items:  center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
}

 

RESULT:

 

  • perspective()

 

It does not affect the element itself, but it does impact the 3D transformations of descendent elements, allowing them all to have the same depth perspective.

 

CSS:

perspective(value)

 

Transitions

 

Transitions work as the foundation of animations because they specify the duration of the element changing its state smoothly over time. This state change would be abrupt and take effect immediately if there was no transition. When using transforms, one should use transitions to create a smooth and gradual animation.

 

Only two of the four transition properties are required:

  • The Transition-property (required)

 

This property is used to specify the transition. It can be applied to an individual property,e.g., border-color to all the properties specifying “all”.

 

CSS:

.item{
    transition-property: border-color;
    transition-property: all;
}

 

  • The Transition-duration (required)

 

This property is used to specify the time duration of the transition.

 

CSS:

.item{
    transition-duration0.8s;
}

 

  • The Transition-timing-function

 

CSS:

.item{
    transition-timing-function: ease-out;
}

 

  • The Transition-delay 

 

CSS:

.item{
    transition-delay1s;
}

 

Short-cut Method:

 

CSS:

.item{
    transition: [property] [duration] [timing-function] 
    [delay];
    transition: border-color 0.8s ease-out 1s;
}

 

Keyframes

 

Keyframes are very crucial in the animation process. It includes information about an action’s beginning and finish point. A keyframe informs us two things:

  • First, it tells us about what is the frame’s action is at a specific point in time
  • It also tells us when that action occurs.

 

A keyframe is a point in the timeline where a new symbol instance appears.

 

Example-

 

HTML:

<div class = "item">
</div>

<p><b>NOTE:</b> The animation goes back to the original state after the animation finishes.</p>

 

CSS:

.item{
    width100px;
    height100px;
    background-color: black;
    animation-name: square;
    animation-duration4s;
}

@keyframes square{
    0%{
        background-color: black;
    }
    25%{
        background-color: red;
    }
    50%{
        background-color: yellow;
    }
    100%{
        background-color: blue;
    }
}

 

RESULT:

 

 

CSS Animation Properties

 

  • animation: It sets up all the animation properties.
  • @keyframes: It is used to specify the animation code.
  • animation-delay: It specifies the animation start duration by making it delay at the start.
  • animation-duration: This property is used to specify the duration of the animation to complete.
  • animation-direction: It helps specify the animation's motion, for example, if the animation will forward or backward or in alternate cycles.
  • animation-iteration-count: It helps in counting the number of times an animation should play on.
  • animation-play-state: It indicates whether the animation is paused or running
  • animation-fill-mode: It is generally used to specify the style of animation when the animation is paused or stopped.
  • animation-timing-function: It specifies the speed of animation.
  • animation-name: It helps in specifying the name of the animation in the @keyframes

 

Frequently Asked Questions

 

  1. What is the need of animations in CSS3?

 

Animations in CSS are generally helpful as it reduces the use of Javascript / jQuery / Flash code and helps to create a webpage which is user friendly and interactive. It helps in creating nice looking effects on your website.

 

  1. What is meant by CSS3 transitions?

 

Transitions in CSS3 allow us to change the property values very smoothly(from one value to another/ from beginning to the end point), over a given duration of time specified.

 

div{
    -webkit-transition: width 3s, height 5s;
    transition: width 3s, height 5s;
}

 

  1. What is the syntax for the animation CSS property?

 

@keyframes: keyframe-name{percentage | from | to {cssrules}}

 

Keyframes play a vital role in making animations as it holds what styles the element should have at a certain time.

 

Key Takeaways

 

We learned about animation basics in this blog with some hands-on examples to get a good hold of it. We also learned about transforms, transitions and keyframes which plays an important role while designing animations.

 

Enroll in our Full Stack Web Development Course to deeply understand the animations and 3D space in Web Development with real-life projects to work on. 

 

Credits: GIPHY

 

Happy Developing!

 

By Sneha Mallik

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think