paint-brush
Winning on the Web with Cascading Style Sheets (CSS) Animationsby@rahull
222 reads

Winning on the Web with Cascading Style Sheets (CSS) Animations

by RahulFebruary 28th, 2021
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Web Animation can be used to attract attention, engage people better, and communicate more clearly and effectively.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Winning on the Web with Cascading Style Sheets (CSS) Animations
Rahul HackerNoon profile picture

Lead image courtesy of Alltechbuzz on Pexels.

Web animations 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 of an Animation

The 

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

Direction of 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 behavior.

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 🍵

SUPPORT ME

Previously published here.