Open In App

How to animate the drawing on a web page?

Improve
Improve
Like Article
Like
Save
Share
Report

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>geeksforgeeks geeksforgeeks geeksforgeeks
      geeksforgeeks geeksforgeeks
geeksforgeeks</b>
</div>
  
</body>
</html>


Output:



Last Updated : 24 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads