Mastering CSS Animation
Tags: webdev, css, codenewbie, programming
Published: 2021-02-23 13:55:42

Hey guy's I also post my articles on <a href="https://hashnode.com/@RAHULISM/joinme" target="_blank">Hashnode</a> the amazing community and best blog platform for Devs. 

--- 

Web Animation can be used to attract attention, engage people better, and communicate more clearly and effectively. 
It can engage and hold people's attention longer than just a static web page. 

---

## The `@keyframes` rule

When you specify CSS styles inside the `@keyframes` rule, the animation will gradually change form the current style to the new style at certain times. 

The animation is specified by using two types keywords: **from** - **to** and `0%` - `100%`. 

NOTE: By using per cent, you can add as many style changes as you like, For Example On(0%,20%,40%,80% and 100%). 

---

### Example

To get an animation to work, you must bind the animation to an element. 

```css
.content{ 
  width: 100px;
  height: 100px;
  color: orange;
  animation-name: false;
  animation-duration: 0.3s;
 }
 
 @keyframes fade {
   from{ opacity: 0; }
   to{ opacity: 1; }
  }
```

If the **animation-duration** property is not specified, no animation will occur, because the default value is 0s. 

#### Delay an Animation

The `animation-delay` property specifies a delay for the start of an animation

#### Iteration an Animation

The `animation-iteration-count` property specifies the number of times an animation should run. 

---

### Direction an Animation

The `animation-direction` property specifies whether an animation should be played forwards, backwards or in alternate cycles. 

The `animation-direction` property can have the following: 

- **normal** - default
- **reverse** - The animation is played in reverse direction(backwards)
- **alternate** - The animation is played forwards first, then backwards
- **alternate-reverse** - The animation is played backwards first, then forwards

---

### Specify the speed curve of the Animation

The `animation-timing-function` property specifies the speed curve of the animation. 

The `animation-timing-function` property can have the following values: 

- **ease** - Slow start, then fast, then end slowly (default)
- **linear** - Same speed from start to end
- **ease-in** - slow start
- **ease-out** - Slow end
- **ease-in-out** - Slow start and end
- **cubicbezier(n,n,n,n)** - Lets you define your own values in a cubic-bezier function. 

---

### Specify the fill-mode for an animation

Animation does not affect an element before the first keyframe is played or after the last keyframe is played. The `animation-fill-mode` property is used to override this behaviour.

The `animation-fill-mode` property specifies a style for the target element when the animation is not playing (before it starts after it ends, or both)

- **none** - Animation will not apply any styles
- **forwards** - The element will retain the style values that are set by the last keyframe
- **backwards** - The element will retain style values that are set by the first keyframe
- **both** - Retain style from first and last both.

---

### Animation shorthand property

```css
.content{
   width: 100px;
   height: 100px;
   color: orange;
   /*animation: name duration timing-function delay iteration-count direction filll-mode*/
   animation: fade 0.3s ease 1s 1 reverse forwards; 
 }
```

---

⌛ Thanks For Reading | Happy Coding 🍵