programplug Logo




CSS Animation

CSS animation property is the process for creating the aniamtion in any motion and change their apperance according how you want to display on web page.


@keyframes Rule in CSS3:
When you make CSS styles inside the @keyframe rule , the animation will automatically change from the running style to the new style at a certain times.

Example-
@keyframes animation 
{
from 
{
background-color: red;
}
to 
{
background-color: blue;
}
}
div 
{
width: 110px;
height: 120px;
background-color: green;
animation-name: animation;
animation-duration: 5s;
}
  

How CSS3 animation works:
The CSS3 animation is created with a @keyframe rule that allow you to bound with selector and if not bound then the animation will ahve no effect.
By the bound of a selector it have two main properties:
-It work in name of the animation.
-It work in the duration of the animation.


CSS animation to change background color:
In below example we will see the changes of color in rectangle from black to red.


<!DOCTYPE html> 
<html> 
<head>  
<style>  
div 
{  
width: 100px;  
height: 100px;  
background: black;  
-webkit-animation: myfirst 6s; /* Chrome, Opera */  
animation: myfirst 5s;  
}  

/* Standard syntax */  
@keyframes myfirst 
{  
from {background: black;
}  
to {background: red;
}  
}  
/* Chrome, Safari, Opera */  
@-webkit-keyframes myfirst 
{  
from 
{
background: black;
}  
to 
{
background: red;
}  
}  
</style>  
</head>   
<body>  

Note: Internet Explorer 9 doesn't support this animation property.

</body > </html>

Moving left animation::


<html> 
<head> 

<style type="text/css">  
h1 
{
-moz-animation-duration: 3s;
-webkit-animation-duration: 4s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein 
{
from 
{
margin-left:100%;
width:300%
}
to 
{
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein 
{
from 
{
margin-left:100%;
width:300%
}
to
{
margin-left:0%;
width:100%;
}
}
</style>  


</head>   
<body>  
<h1>Tutorials Point </h1>  
<p>this is an example of moving left animation . </p>  
<button onclick="myFunction()">Reload page </button>  
<script>  
function myFunction() 
{
location.reload();
}
</script>  
</body >  
</html>  
 

Moving left animation with keyframes rules:
Below is the example to demonstrate the aninmation to move left.


<html> 
<head> 
<style type="text/css">  
h1 
{
-moz-animation-duration: 4s;
-webkit-animation-duration: 4s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein 
{
from 
{
margin-left:98%;
width:350%
}
75% 
{
font-size:350%;
margin-left:35%;
width:140%;
}
to 
{
margin-left:10%;
width:98%;
}
}
@-webkit-keyframes slidein 
{
from 
{
margin-left:98%;
width:350%
}
85%
{
font-size:350%;
margin-left:30%;
width:160%;
}
to 
{
margin-left:10%;
width:100%;
}
}
</style>  


</head>   
<body> 
<h1>programplug</h1>

An example of animation left with keyframe to make text changes.

<script> function myFunction() { location.reload(); } </script> </body > </html>





Our Services

Developing Cheapest Websites
Offer Digital Marketing
Provide College Projects
Attractive Website Developing
Summer Training,Industrial Training
SCO,SMO

Contact Us

Dehradun Uttarakhand India
www.programplug.com
info@programplug.com
08534019974
Designed By : Mridul Gupta

Other Link

About Us

Contact Us

Disclaimer

Privacy Policy