Introduction

Animation makes a web page more interesting, attractive, and interactive than any static web page that doesn't contain any animation. A ton of websites we visit each day but very few stand out in terms of the pure frontend. Animation in web pages makes our website stand out in a pool of websites.

So, I am going to start a series called Web Animation. In this, we will learn Web Animation using CSS from scratch. We will learn the various concept from basic to advance.

Starting with the first topics in web Animation are transform, transition, and keyframes.

Transform

Transform property helps you to add a 2D or 3D transformation to an element. It allows you to scale, rotate, move, etc. an element. Read here to know about all the values for transform property.

Code

 {  transform : scale(1.5,1.5) }

CodePen Example

https://codepen.io/surajsrv11/embed/ExXWJrr?height=600&default-tab=result&embed-version=2

In the above example, the element with the class name smallcircle is given the transform property. We applied the translate value to change the location of the element. smallcircle and bigcircle together appears as concentric circles.

Transition

CSS transition property allows you to change the property of the element over a particular duration. As a value, we passed the property name to which we want to apply the transition. We can define duration, delay of transition separated by a single space in terms of seconds. You can learn about different values related to transition here

Code

 {  transition : background-color 1s; }

CodePen Example

https://codepen.io/surajsrv11/embed/wvedrgr?height=600&default-tab=result&embed-version=2

In the above codepen, we can see the circle is transitioning from left to right with a change in the color of the circle. We have applied transition property to the div with the class name circle. As a value, we have passed the property on which we want to apply transition with the duration of transition next to it. We can give a different value for the transition that can be separated by a comma(,). To trigger the transition we have used a hover selector. This has to define property and value to which transition happens from the initial value.

Keyframe

Keyframe allows you to control the flow of animation by giving different CSS styles set to different animation stages. It is the transition from one set of CSS styles to another. You can change the different properties of an element multiple times. You can use from and to to define the start and end of transition respectively. You can also use percentage to define multiple changes during different stages of transition, 0% to 100% percent are used. 0% for starting and 100% for ending the transition.

Code

 @keyframe move{  from{    background-color:red; }  to{    background-color:green; }

Codepen Example

https://codepen.io/surajsrv11/embed/XWgRzdX?height=600&default-tab=result&embed-version=2

In the above codepen, we have three circles that are animating in a loop. We have define animation property such as animation-name, animation-duration, animation-iteration-count, and animation-timing-function. For transition we have a keyframe define using @. After defining the @keyframe, we have the name of the animation that is bounce and bounce1. As to define animation we have used percentage. We have 50% to define our CSS style for transition. As there are no 0% and 100% that makes starting and ending value for animation as the initial value of the property.

Last Note

Now with the help of transform, transition, and keyframe we can add basic animation to our web pages.

I hope, with this new power of animation, you will apply it in your next project to make it more interactive.

Thank You for reading the blog post.

MORE FROM SURAJ VISHWAKARMA