课堂之动画的详细学习
今天学了动画，动画的功能真的很强大，如果有哪个不把麻烦的耐心，完全可以做个
动画片出来。
1、animation-name
元素所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
div{
-webkit-animation-name : FromLeftToRight;
animation-name : FromLeftToRight;
}
2、 keyframes
被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
@-webkit-keyframes FromLeftToRight{
0%{left: 0; }
100%{ left: 800px; }
}
@-webkit-keyframes FromLeftToRight{
from {left: 0; }
to {left: 800px; }
}
@keyframes FromLeftToRight{ 0%{left: 0; } 100%{ left: 800px; } }
@keyframes FromLeftToRight{ from {left: 0; } to {left: 800px; } }
3、animation-duration
设置对象动画的持续时间
div{
-webkit-animation-duration:1s;
animation-duration:1s
}
4、animation-timing-function
div{
-webkit-animation-timing-function : ease-in;
animation-timing-function : ease-in;
}
5、animation-delay
设置对象动画的延迟时间
div{
-webkit-animation-delay : 1s;
animation-delay : ease-in;
}
6、 animation-iteration-count
设置对象动画的延迟时间
div{
-webkit-animation-iteration-count : 2;
animation-iteration-count : 2;
}
infinite表示无限次数
7、animation-direction
设置对象动画在循环中是否按照相反顺序执行
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
div{
-webkit-animation-direction : normal;
animation-direction : normal;
}
8、animation-play-state
running：运动 paused：暂停
div:hover{
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
9、animation-fill-mode
设置对象动画时间之外的状态
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态
div {
-webkit-animation-fill-mode : both;
animation-fill-mode : both;
}
10、animation
通过 animation ，我们能够创建自定义动画，这可以在许多网页中取代动画图片gif、Flash 动画以及 JavaScript。
animation：[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] ||
[ animation-delay ] || [animation-iteration-count ] || [ animation-direction ] || <single-animation-fill-mode> ||
<single-animation-play-state> [ ,*]
多个可以逗号隔开；
div{
-webkit-animation: FromLeftToRight 2s ease-out forwards;
animation: FromLeftToRight 2s ease-out forwards;
}
小例子：
简单的纯css的轮播图，没有索引的点击。
效果图：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播css</title> <style> body{ margin: 0; } #container{ margin: 50px auto 0; width: 160px; height: 110px; box-shadow: 1px 1px 3px 1px #888; } #wrap{ width: 160px; height: 110px; background: url(images/1.jpg) no-repeat; animation: Carousel 20s infinite; opacity: 1; } #wrap:hover{ animation-play-state:paused; } @keyframes Carousel{ 0%{background: url(images/1.jpg) no-repeat;opacity: 1;} 4%{opacity: 1} 8%{opacity:0.6;background: url(images/1.jpg) no-repeat;opacity: 1;} 12%{opacity:0.2;background: url(images/2.jpg) no-repeat;} 16%{opacity:0.6;background: url(images/2.jpg) no-repeat;} 20%{opacity:1;background: url(images/2.jpg) no-repeat;} 24%{opacity: 1} 28%{opacity: 0.6;background: url(images/2.jpg) no-repeat;} 32%{opacity:0.2;background: url(images/3.jpg) no-repeat;} 36%{opacity:0.6;background: url(images/3.jpg) no-repeat;} 40%{opacity:1;background: url(images/3.jpg) no-repeat;} 44%{opacity: 1} 48%{opacity: 0.6;background: url(images/3.jpg) no-repeat;} 52%{opacity:0.2;background: url(images/4.jpg) no-repeat;} 56%{opacity:0.6;background: url(images/4.jpg) no-repeat;} 60%{opacity:1;background: url(images/4.jpg) no-repeat;} 64%{opacity: 1} 68%{opacity: 0.6;background: url(images/4.jpg) no-repeat;} 72%{opacity:0.2;background: url(images/5.jpg) no-repeat;} 76%{opacity:0.6;background: url(images/5.jpg) no-repeat;} 80%{opacity:1;background: url(images/5.jpg) no-repeat;} 84%{opacity: 1} 88%{opacity: 0.6;background: url(images/5.jpg) no-repeat;} 92%{opacity:0.2;background: url(images/1.jpg) no-repeat;} 96%{opacity:0.6;background: url(images/1.jpg) no-repeat;} 100%{opacity:1;background: url(images/1.jpg) no-repeat;} } </style> </head> <body> <div id="container"> <div id="wrap"> </div> </div> </body> </html>
不解释！
