How to animate the drawing on a web page?️‍🔥

CSS allows animation of HTML elements without using JavaScript.

An animation lets an element gradually change from one style to another. You can change as many CSS assets as you want, as often as you want. To use CSS animation, you must first specify some keyframes for the animation. The keyframe captures what style the element will be at a given time.

CSS | @keyframes Rule

The @keyframes rule is used to specify the animation rule. An animation is created by using changeable CSS styles. During the animation CSS, the property can change many times.

Syntax:

@keyframes animation-name {keyframes-selector {css-styles;}}

Property value: This parameter accepts three values that mentioned above and described below:

animation-name: The animation-name is required and it defines the animation name.
keyframes-selector: The keyframes-selector defines the percentage of the animation. It lies between 0% to 100%. One animation can contain many selectors.
css-styles: The css-styles defines the one or more legal or applicable CSS style properties.

To define an animation you have to start with the @keyframes rule. A @keyframe rule consists of the keyword “@keyframes“, followed by an identifier giving a name for the animation (which will be referenced using animation-name), followed by a set of style rules (delimited by curly braces). The animation is then applied to an element by using the identifier as a value for the animation-name property.

Here’s the @ rule we’ll be using:

/* define the animation */
@keyframes your-animation-name {
    /* style rules */
}

/* apply it to an element */
.element {
    animation-name: your-animation-name;

    /* OR using the animation shorthand property */
    animation: your-animation-name 1s ...
}

Examples 1:

<!DOCTYPE html> 
<html> 
<head> 
<style>  
div { 
  width: 100px; 
  height: 100px; 
  background-color: green; 
  position: relative; 
  animation-name: example; 
  animation-duration: 4s; 
} 
  
@keyframes example { 
  0%   {background-color:black; left:0px; top:0px;} 
  25%  {background-color:yellow; left:200px; top:0px;} 
  50%  {background-color:blue; left:200px; top:200px;} 
  75%  {background-color:green; left:0px; top:200px;} 
  100% {background-color:black; left:0px; top:0px;} 
} 
</style> 
</head> 
<body> 
  
<div></div> 
  
</body> 
</html> 

Output:

Examples 2:

<!DOCTYPE html> 
<html> 
<head> 
<style>  
@keyframes fadein_left { 
  from { 
    left: 0; 
  } 
  to { 
    left: 40%; 
  } 
} 
  
#start:before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0%; 
  opacity: 0.7; 
  height: 25px; 
  background: #fff; 
  animation: fadein_left 5s; 
} 
</style> 
</head> 
<body> 
  
<div id="start"> 
  <b>w3wiki w3wiki w3wiki 
      w3wiki w3wiki 
w3wiki</b> 
</div> 
  
</body> 
</html> 

Output: