css3--animation effects

CSS3 animation in the style of the implementation of the previous we use JQ write animation effect, really easy a lot ~

Simple demo:

HTML code:

<div id= "Dv1" ></div>

CSS3 Code:

<style type= "Text/css" >

#dv1 {width:100px;height:100px;border:1px solid blue; -webkit-animation:myfirst 3s; Position:relative;}

@webkit-keyframes{

0%{left:0px;top:0px;}

25%{left:200px;top:0px;}

50%{left:200px;top:200px;}

75%{left:0px;top:200px;}

100%{left:0px;top:0px;}

}

</style>

--------------------below shows a demo that keeps the circle spinning

The code is as follows:

<! DOCTYPE html>"Text/css">#dv1 {width:100px;height:100px;border:100px solid green; Border-left-color:yellow;border-top-color:red;border-bottom-Color:blue; Border-radius: -%; -webkit-animation:myanimation 3s infinite linear; }    @-webkit-keyframes myanimation{0%{transform:rotate (0deg);}  -%{transform:rotate (360deg);} }    </style>"Dv1"></div></body>
css3--animation effects