Web Animation with CSS - Animation Property
Tags: css, webdev, javascript, beginners
Published: 2021-09-30 08:45:29

# 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**](https://dev.to/basecampxd/web-animation-with-css-2c5d).

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

```css
{
 animation-direction:reverse
}
```

## Codepen Example

{% codepen https://codepen.io/surajsrv11/pen/BaZGYGj %}

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

```css
{
 animation-timing-function: linear;
}
```

## CodePen Example

{% codepen https://codepen.io/surajsrv11/pen/MWoxKpq %}

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**](https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp). 

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**](https://cubic-bezier.com/) 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

```css
{
 animation: bounce 1s infinite ease;
}
```

## CodePen Example

{% codepen https://codepen.io/surajsrv11/pen/YzQgwJp %}

---

# [Weekly Newsletter of SurajOnDev](https://www.getrevue.co/profile/surajondev)

![Weekly Newsletter of SurajOnDev](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/boivc5mdfzzs2kt0s5wg.PNG)

## 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](https://tripetto.app/run/4OQIUAO89L)

---

# 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](https://dev.to/basecampxd/web-animation-with-css-2c5d).

Thank You for reading the blog post.