HTML- Hyper Text Markup Language and CSS Cascading Style Sheets

champak
HTML
₹2,000.00 ₹1,500.00
  • 19 students
  • 7 lessons
  • 2 quizzes
  • 10 week duration

How to implement animation using CSS.

How to implement CSS Animations in a html page?

To start with we shall create a html page and create a colored div of dimensions  200 by 200 pixels in the page.


<!DOCTYPE html>

<html>
<head>
<title>Drag and Drop One</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.simpleanimation
{
background-color: green;
width: 200px;
height: 200px;
}

</style>
</head>
<body>
<div class="simpleanimation">
Content
</div>
</body>
</html>

&nbsp;

This page can be viewed here

One

Next step.

We need to define the following attributes inside the CSS class.

  • animation-name. This is the name of the animation. This will be used while creating the keyframes.
  • animation-duration. This is the duration of the animation. It is zero by default. Therefore giving animation-duration  is compulsory.
  • animation-iteration-count. This is the number of times the animation is repeated. It is zero by default. If you want it to run forever write infinite.

Next, we have to create the keyframes.

What are keyframes? keyframes are the key points in the movement/change of an  element during animation. If a ball is to be dropped and bounced up then these will be the keyframes.

 

Keyframes are the points where the animated element makes changes in its behavior.

The balls in blue are the keyframes.

The keyframes have two sections from and to. You define the starting style in from and the ending in to. CSS will ensure a smooth change over from ‘from’ to ‘to’


<!DOCTYPE html>

<html>
<head>
<title>Drag and Drop Two</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.simpleanimation
{
background-color: green;
width: 200px;
height: 200px;
animation-name: firstanimation;
animation-duration: 5s;
animation-iteration-count: 3;
}
@keyframes firstanimation
{
from{background-color:red;}
to{background-color:yellow;}
}
</style>
</head>
<body>
<div class="simpleanimation">
Content
</div>
</body>
</html>

Here is a link.

Two

Continuing further we shall add some movement to our div. We shall make it move from left =0 px to left=700px. To do this we need to set position to absolute and add left=0px to from and left=700px to to.

Here is the code now.


<!DOCTYPE html>

<html>
<head>
<title>Drag and Drop Three</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.simpleanimation
{
background-color: green;
width: 200px;
height: 200px;
position: absolute;
animation-name: firstanimation;
animation-duration: 5s;
animation-iteration-count: 3;
}
@keyframes firstanimation
{
from{background-color:red; left:0px;}
to{background-color:yellow;left:700px;}
}
</style>
</head>
<body>
<div class="simpleanimation">
Content
</div>
</body>
</html>

 

Three

 

Now, we will try out two new attributes.

  • animation-delay
    and
  • animation-direction

animation-delay is given in seconds and is the time delay after which the animation begins. animation-direction has two possible values normal(default) and alternate. Normal makes it jump from the end to the from state while alternate will reverse the animation on even rounds.


<!DOCTYPE html>

<html>
<head>
<title>Drag and Drop Four</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.simpleanimation
{
background-color: green;
width: 200px;
height: 200px;
position: absolute;
animation-name: firstanimation;
animation-duration: 5s;
animation-iteration-count: 5;
animation-direction: alternate;
animation-delay: 5s;
}
@keyframes firstanimation
{
from{background-color:red; left:0px;}
to{background-color:yellow;left:700px;}
}
</style>
</head>
<body>
<div class="simpleanimation">
Content
</div>
</body>
</html>

&nbsp;

Next, attribute animation-fill-mode.
This attribute has the following possible values.

  1. forwards. This will leave our div at red 0px for even animation-iteration-count and yellow 700px for even animation-iteration-count.
  2. backwards. This will take the value from ‘from’ and apply it to the delay frames. In our case the div will look red and not green
  3. both. Will apply both backwards and forwards.

forwards

Five


<!DOCTYPE html>

<html>
<head>
<title>Drag and Drop Five</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.simpleanimation
{
background-color: green;
width: 200px;
height: 200px;
position: absolute;
animation-name: firstanimation;
animation-duration: 5s;
animation-iteration-count: 5;
animation-direction: alternate;
animation-delay: 5s;
animation-fill-mode: forwards;
}
@keyframes firstanimation
{
from{background-color:red; left:0px;}
to{background-color:yellow;left:700px;}
}
</style>
</head>
<body>
<div class="simpleanimation">
Content
</div>
</body>
</html>

 

 

 

 

backwards.

Six


<!DOCTYPE html>

<html>
<head>
<title>Drag and Drop Six</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.simpleanimation
{
background-color: green;
width: 200px;
height: 200px;
position: absolute;
animation-name: firstanimation;
animation-duration: 5s;
animation-iteration-count: 5;
animation-direction: alternate;
animation-delay: 5s;
animation-fill-mode: backwards;
}
@keyframes firstanimation
{
from{background-color:red; left:0px;}
to{background-color:yellow;left:700px;}
}
</style>
</head>
<body>
<div class="simpleanimation">
Content
</div>
</body>
</html>

 

 

 

both
Seven


&nbsp;

<!DOCTYPE html>

<html>
<head>
<title>Drag and Drop Seven</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.simpleanimation
{
background-color: green;
width: 200px;
height: 200px;
position: absolute;
animation-name: firstanimation;
animation-duration: 5s;
animation-iteration-count: 5;
animation-direction: alternate;
animation-delay: 5s;
animation-fill-mode: both;
}
@keyframes firstanimation
{
from{background-color:red; left:0px;}
to{background-color:yellow;left:700px;}
}
</style>
</head>
<body>
<div class="simpleanimation">
Content
</div>
</body>
</html>

 

 

end

Leave a Reply

Your email address will not be published. Required fields are marked *