您的位置：首页 > Web前端 > CSS

css3-动画

2016-01-07 17:04 597 查看
CSS3的动画需要遵循@keyframes规则：

规定动画的时长

规定动画的名称

下面这个动画的效果就是一个方块进行一个顺时针正方形循环，然后在逆时针返回的循环效果：

div{
width: 100px;
height: 100px;
background-color: red;
position: relative;
/*infinite alternate 是用来使动画进行循环的*/
animation: anim 5s infinite alternate;
-moz-animation: anim 5s infinite alternate;

}
@-moz-keyframes anim {
0%{background:red;left: 0px;
top:0px;}
25%{background: blue;
left:200px;
top:0px;}
50%{background: darkgoldenrod;
left:200px;
top:200px;}
75%{background: darkblue;
left:0;top: 200px}
100%{background: red;
left:0;
top:0;}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航