CSS3 animation effects
Do CSS3 animation effect, the documents of the document has already had the case. Animation cases, but also looked at half a day to get out.
The following is a combination of personal understanding of the introduction. The last person to do an animated demo
CSS3 's animation case mainly needs to understand animation: can be regarded as the declaration part of the animation. You can write the contents of the animation properties to the back, the properties of the animation are mainly: Animation-name Animation-duration also have some animation delay, animation played. These are added according to the animation effect.
The format is: Animation:animation-name animation-duration is ok by attribute order.
Animation content Format:
@keyframes animation-name{Animation Value}
Different prefixes are used for different browsers.
For the position where you want to change the animation effect, you need to make a position:relative declaration effect on the element.
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
div {
width:100px;
height:100px;
margin-top:100px;
position:relative;
background-color:red;
animation:myfirst 2s linear 2s infinite alternate; //Animation named Myfirst Animation duration 2 seconds, constant speed, 2 seconds delay, no instant playback.
-webkit-animation:myfirst 2s; //safari Browser is available. If you want to apply other browsers, use-moz-Firefox -0-opear
}
@keyframes myfirst{
0%{background:red;transform:rotate (0); left:0px;top:0px;}
15%{background:greenyellow;transform:rotate (15deg); left:0px;top:0px;}
50%{background:greenyellow;transform:rotate (15deg); left:300px;top:0px;}
100%{background:red;transform:rotate ( -360deg); left:0px;top:0px;}
@-webkit-keyframes myfirst{
0%{background:red;transform:rotate (0); left:0px;top:100px;}
15%{background:greenyellow;transform:rotate (15deg); left:0px;top:0px;}
50%{background:greenyellow;transform:rotate (15deg); left:300px;top:0px;}
100%{background:red;transform:rotate ( -360deg); left:0px;top:0px;}
}
@-moz-keyframes myfirst{
0%{background:red;transform:rotate (0); left:0px;top:100px;}
15%{background:greenyellow;transform:rotate (15deg); left:0px;top:0px;}
50%{background:greenyellow;transform:rotate (15deg); left:300px;top:0px;}
100%{background:red;transform:rotate ( -360deg); left:0px;top:0px;}
}
@-o-keyframes myfirst{
0%{background:red;transform:rotate (0); left:0px;top:100px;}
15%{background:greenyellow;transform:rotate (15deg); left:0px;top:0px;}
50%{background:greenyellow;transform:rotate (15deg); left:300px;top:0px;}
100%{background:red;transform:rotate ( -360deg); left:0px;top:0px;}
}
</style>
<body>
<div id= "Myfirst" >
Hello word!
</div>
</body>
This article is from the Web front end iOS blog, so be sure to keep this source http://mengle.blog.51cto.com/10803421/1704590
CSS3 animation effects