Introduction

Continuing with the series of Web Animation with CSS. Today we are going to learn more about animation using CSS.

The last part of the series paved the way to start animating in web pages for beginners. You can read here.

So let's get started with today's topic.

Animation Direction

As the name suggests this property is used to alter the direction of animation. It has four values normal, reverse, alternate and alternate-reverse.

Code

 {  animation-direction:reverse }

Codepen Example

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

In the above example, I have used the animation-direction with the value alternate. The animation first started as normal and for 2nd time it reversed. This happens alternately once normal and other times reverse. It becomes a sequence of animation looping again and again.

Animation Timing Function

The animation timing function helps you to control the animation speed curve. This curve defines the speed of animation transition at the different time frames. This curve helps you to make the transition smoothly.

Code

 {  animation-timing-function: linear; }

CodePen Example

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

In the above Codepen, the ball is moving from top to bottom. The animation is not linear as the speed of transition changes. We have used animation-timing-function with the value ease. Using ease value the animation has a slow start and end but fast in between slow and end. There is various value to animation timing function, you can learn more about it here.

One such value of the animation-timing function is cubic-bezier. It let you create your timing function to control your animation. It takes 4 numeric values between 0 and 1. You can visit Cubic Bezier to create your animation timing function.

Animation Shorthand

Till now we have used lot of animation property to define animation such as animation-direction, animation-delay, animation-timing-function, etc. You can use shorthand technique to define all animation related property into single property that is animation.

Code

 {  animation: bounce 1s infinite ease; }

CodePen Example

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

Weekly Newsletter of SurajOnDev

Weekly Newsletter of SurajOnDev

What you will get?

  • Read of the Week: 5 best articles hand-picked by myself from different platforms. This article will be developer, self-growth, and productivity-oriented.
  • Tool of the Week: A resource or tool link that will help in easing your work.
  • Our latest blog post: Latest 3 blog post from SurajOnDev that is me.
  • Free eBook and Resources: Occasionally you will get free eBook that are by developers and for developers.

Frequency: Weekly
Subscribe Here: Weekly Newsletter of SurajOnDev

Last Note

Now with these properties of CSS, you can have more control over your animation.

I highly recommend you to read our previous blog post of this series Web Animation with CSS - Learn the Basics.

Thank You for reading the blog post.

MORE FROM SURAJ VISHWAKARMA

 This post is ad-supported
​