css 动画效果
要搞就搞明白，一知半解时停止研究 损失最大
css3意义：
CSS3 动画
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
重点知识
CSS3 @keyframes 规则
如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
CSS3 动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：
属性
描述
CSS
@keyframes
规定动画。
3
animation
所有动画属性的简写属性，除了 animation-play-state 属性。
3
animation-name
规定 @keyframes 动画的名称。
3
animation-duration
规定动画完成一个周期所花费的秒或毫秒。默认是 0。
3
animation-timing-function
规定动画的速度曲线。默认是 "ease"。
3
animation-delay
规定动画何时开始。默认是 0。
3
animation-iteration-count
规定动画被播放的次数。默认是 1。
3
animation-direction
规定动画是否在下一周期逆向地播放。默认是 "normal"。
3
animation-play-state
规定动画是否正在运行或暂停。默认是 "running"。
3
animation-fill-mode
规定对象动画时间之外的状态。
3
参考资料:http://www.w3school.com.cn/css3/css3_animation.asp
作业：
1.实现颜色的变化
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
，多种颜色变化
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
2.实现颜色和位置的变化
@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;}
}
3.重复
animation-iteration-count 规定动画被播放的次数
animation-iteration-count:1;
-webkit-animation-iteration-count:1; /* Safari 和 Chrome */
设置一个够大的数。
简写一个参数
animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running;
animation: myfirst 5s linear 2s infinite alternate; /* Firefox: */ -moz-animation: myfirst 5s linear 2s infinite alternate; /* Safari 和 Chrome: */ -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Opera: */ -o-animation: myfirst 5s linear 2s infinite alternate;
实际应用：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
<style type="text/css">
@keyframes passdown {
0% {
bottom: 5px;
}
50% {
bottom: 12px;
}
100% {
bottom: 5px;
}
}
@-webkit-keyframes passdown {
0% {
bottom: 5px;
}
50% {
bottom: 12px;
}
100% {
bottom: 5px;
}
}
.one-slide-8 {
opacity: 1;
transition: all 0.1s ease-in 5.1s;
-webkit-transition: all 0.1s ease-in 5.1s;
}
.pub-passdown {
position: absolute;
width: 18px;
height: 16px;
left: 50%;
margin-left: -9px;
bottom: 10px;
/*transition: all 1s ease-in 20s;*/
animation-name: passdown;
animation-timing-function: ease;
animation-duration: 0.8s;
animation-iteration-count: infinite;
/*-webkit-transition: all 1s ease-in 20s;*/
-webkit-animation-name: passdown;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 0.8s;
-webkit-animation-iteration-count: infinite;
}
</style>
</head>
<body style="background-color:#000000">
<div class="one-slide-8 pub-passdown">
<img src="http://m.yintai.com/event/actives/luyaninvitation/img/arrow-doubleup.png"/>
</div>
</body>
</html>