---

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.

.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

.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 🍵