HOW TO GIVE ANIMATIONS BY USING CSS3 CODE

Today we learn how to give CSS3 Animations. Its not hard only use simple code as i show you below box.

very simple way of give Animations use CSS3 Code.

1) Copy Below Code.

<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
/* Chrome, Safari, Opera */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Standard syntax */
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.<br />

2) Copy this all code and use it where there you want to add animantions.

Hints:
1) You can change size in code and also can changed color and you can add extra your own code.

SKLIDEAS

Pages

HOW TO GIVE ANIMATIONS BY USING CSS3 CODE

No comments:

Post a Comment