Saturday, 4 February 2017

Animations & Transitions in CSS


Transitions:-

<html>
<head>
<style>
div
{
width:200px;
height:300px;
background:red;
-webkit-transition:width 2s;
-o-transition:width 2s;
}
div:hover
{
width:600px;
}
</style>
</head>
<body>
<div>This is the Demo of Transitions using CSS</div>
</body>
</html>

Output:-





Animations:-

<html>
<head>
<style>
div
{
width:300px;
height:300px;
background:red;
position:relative;
-webkit-animation-name:animation;/* chrome */
-webkit-animation-duration:4s; /* chrome */
animation-iteration-count:infinite;
}
@-webkit-keyframes animation /* chrome */
{
0%{background:red;}
20%{background:green;}
40%{background:yellow;}
60%{background:pink;}
}
</style>
</head>
<body>
<div> This is the demo of animation using CSS</div>
</body>
</html>

Output:-





























No comments:

Post a Comment

Insert, Delete, Update Using Entity Framework and LINQ in ASP.NET 1> Create Database First 2> Create Table 3> Add ADO...