HTML Example 2: CSS Animation and Transition in HTML
Creating CSS Animation and Transition in HTML
this code will explain how to add CSS (Cascading Style Sheet) animation and transition in HTML (HyperText Markup Language).
this code will explain how to add CSS (Cascading Style Sheet) animation and transition in HTML (HyperText Markup Language).
you will learn how to animate images, divisions, paragraph and any other tag using CSS. to apply transition property in HTML we have to implement transition-duration:1s; in pseudo selector (hover).
and to add animation in CSS we use property animation-name:[in which we write name of animations we created using @keyframes, we add duration of animation by animation-duration:2s; and number of iteration by animation-iteration-count:2; animation direction is set by, animation-direction:alternate;
and to add animation in CSS we use property animation-name:[in which we write name of animations we created using @keyframes, we add duration of animation by animation-duration:2s; and number of iteration by animation-iteration-count:2; animation direction is set by, animation-direction:alternate;
Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.mydiv
{
width:200px;
height:200px;
background-color:blue;
}
.mydiv:hover
{
width:300px;
height:300px;
background-color:red;
transition-duration:10s;
}
.kg1
{
background-color:#06F;
width:400px;
height:400px;
border-radius:300px;
animation-name:myfrm;
animation-duration:2s;
animation-iteration-count:2;
animation-direction:alternate;
}
@keyframes myfrm
{
0%
{
background-color:red;
width:800px;
}
25%
{
background-color:green;
}
50%
{
background-color:black;
}
}
</style>
</head>
<body>
<div class="mydiv"></div>
<p class="kg1"></p>
</body>
</html>
Sample Output
No comments