css3 动画效果
2015-10-20 16:44
561 查看
css3 动画效果
js动画代码复杂，css3的推出transition,transform后。简单2行，也可以有炫酷动画了。
下面我就是结合个人理解进行介绍。最后个人做的一个动画demo
css3的动画事例主要需要理解animation：可以算是动画的声明部分。你可以把动画属性的内容全部写到后边，动画的属性主要有：animation-name animation-duration还有一些动画延时，动画播放次数。这些要根据动画效果进行添加。
格式有：animation:animation-name animation-duration按属性顺序写就ok了。
动画内容格式：
@keyframes animation-name{ 动画值}
对于不同浏览器要用不同的前缀。
对于想要改变动画效果位置的，需要在元素上做position:relative 的声明效果。
<!DOCTYPE html>
<html>
<head lang="en">
<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; //动画名为myfirst 动画时长2秒，匀速，延时2秒，无即播放。
-webkit-animation:myfirst 2s; //safari 浏览器适用。如果想适用其它浏览器，用-moz- 火狐 －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>
</head>
<body>
<div id="myfirst">
hello word!
</div>
</body>
</html>
本文出自 “Web前端iOS” 博客，请务必保留此出处http://mengle.blog.51cto.com/10803421/1704590
js动画代码复杂，css3的推出transition,transform后。简单2行，也可以有炫酷动画了。
下面我就是结合个人理解进行介绍。最后个人做的一个动画demo
css3的动画事例主要需要理解animation：可以算是动画的声明部分。你可以把动画属性的内容全部写到后边，动画的属性主要有：animation-name animation-duration还有一些动画延时，动画播放次数。这些要根据动画效果进行添加。
格式有：animation:animation-name animation-duration按属性顺序写就ok了。
动画内容格式：
@keyframes animation-name{ 动画值}
对于不同浏览器要用不同的前缀。
对于想要改变动画效果位置的，需要在元素上做position:relative 的声明效果。
<!DOCTYPE html>
<html>
<head lang="en">
<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; //动画名为myfirst 动画时长2秒，匀速，延时2秒，无即播放。
-webkit-animation:myfirst 2s; //safari 浏览器适用。如果想适用其它浏览器，用-moz- 火狐 －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>
</head>
<body>
<div id="myfirst">
hello word!
</div>
</body>
</html>
本文出自 “Web前端iOS” 博客，请务必保留此出处http://mengle.blog.51cto.com/10803421/1704590
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 