10.自定义动画1）关键帧（keyframes）
被称为关键帧，其类似于flash中的关键帧。
在css3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
语法：@keyframes animationname {keyframes-selector {css-styles;}}
animationname：定义动画的名称。
keyframes-selector：以百分比来规定改变发生的时间，或者通过关键词 from 和 to，等价于 0% 和 100%。建议定义百分比选择器。
css-styles：通过 @keyframes 规则，您能够创建动画，就是将一套 css 样式逐渐变化为另一套样式，并且能够多次改变这套 css 样式。
兼容性：目前浏览器都不支持@keyframes规则，需要加上前缀-moz-,-o-,-webkit-。
例子：
@-webkit-keyframes fromlefttoright{ /* safari 和 chrome */ 0% {left:0;} 100% {left:800px;} }@-moz-keyframes fromlefttoright{ /* firefox */ 0% {left:0;} 100% {left:800px;} }@-o-keyframes fromlefttoright{ /* opera */ 0% {left:0;} 100% {left:800px;} }@keyframes fromlefttoright{ 0% {left:0;} 100% {left:800px;} }
2）动画名称（animation-name）
元素所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义。
animation-name ：none |
：定义一个或多个动画名称，如果是多个，用逗号分隔。
例子：
div{ -webkit-animation-name:fromlefttoright; -moz-animation-name:fromlefttoright; -o-animation-name:fromlefttoright; animation-name:fromlefttoright;}@-webkit-keyframes fromlefttoright{ 0% {left:0;} 100% {left:800px;} }@-moz-keyframes fromlefttoright{ 0% {left:0;} 100% {left:800px;} }@-o-keyframes fromlefttoright{ 0% {left:0;} 100% {left:800px;} }@keyframes fromlefttoright{ 0% {left:0;} 100% {left:800px;} }
3）动画时间（animation-duration）
指定对象动画的持续时间
animation-duration：
例子 源代码：
/* css代码 */.duration{ width:100px; height:100px; background:#000; position:relative; -webkit-animation-name:fromlefttoright; -webkit-animation-duration:3s; -moz-animation-name:fromlefttoright; -moz-animation-duration:3s; animation-name:fromlefttoright; animation-duration:3s;}@-webkit-keyframes fromlefttoright{ 0% {left:0;} 100% {left:500px;} }@-moz-keyframes fromlefttoright{ 0% {left:0;} 100% {left:500px;} }@keyframes fromlefttoright{ 0% {left:0;} 100% {left:500px;} }
body> p>请按f5刷新动画（矩形用3秒向右移动500px）p> div class=duration>div>body>
效果：
请按f5刷新动画（矩形用3秒向右移动500px）
4）动画的过渡速度（animation-timing-function）
animation-timing-function : ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
①ease : 默认值，逐渐变慢(等于 cubic-bezier(0.25,0.1,0.25,1))
②linear : 匀速过渡效果(等于 cubic-bezier(0,0,1,1))
③ease-in : 加速的过渡效果(等于 cubic-bezier(0.42,0,1,1))
④ease-out : 减速的过渡效果(等于 cubic-bezier(0,0,0.58,1))
⑤ease-in-out : 加速然后减速(等于cubic-bezier (0.42, 0, 0.58, 1))
⑥cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值，可能的值是 0 至 1 之间的数值。
例子 源代码：
/* css代码 */.function{ width:100px; height:100px; background:#ccc; position:relative; margin:5px; -webkit-animation-name:fromlefttoright; -webkit-animation-duration:3s; -moz-animation-name:fromlefttoright; -moz-animation-duration:3s; animation-name:fromlefttoright; animation-duration:3s;}.ease-in{ -webkit-animation-timing-function:ease-in; -moz-animation-timing-function:ease-in; animation-timing-function:ease-in;}.ease-out{ -webkit-animation-timing-function:ease-out; -moz-animation-timing-function:ease-out; animation-timing-function:ease-out;}@-webkit-keyframes fromlefttoright{ 0% {left:0;} 100% {left:500px;} }@-moz-keyframes fromlefttoright{ 0% {left:0;} 100% {left:500px;} }@keyframes fromlefttoright{ 0% {left:0;} 100% {left:500px;} }
body> p>请按f5刷新动画（两个矩形同样在3秒用不同的速率向右移动500px）p> div class=function ease-in>ease-indiv> div class=function ease-out>ease-outdiv>body>
效果：
请按f5刷新动画（两个矩形同样在3秒用不同的速率向右移动500px）
ease-in
ease-out
5）动画延迟时间（animation-delay）
指定对象动画延迟的时间
animation-delay：
例子 源代码：
/* css代码 */.delay{ width:100px; height:100px; background:#000; position:relative; -webkit-animation-name:fromlefttoright; -webkit-animation-duration:3s; -webkit-animation-delay:2s; -moz-animation-name:fromlefttoright; -moz-animation-duration:3s; -moz-animation-delay:2s; animation-name:fromlefttoright; animation-duration:3s; animation-delay:2s;}@-webkit-keyframes fromlefttoright{ 0% {left:0;} 100% {left:500px;} }@-moz-keyframes fromlefttoright{ 0% {left:0;} 100% {left:500px;} }@keyframes fromlefttoright{ 0% {left:0;} 100% {left:500px;} }
body> p>请按f5刷新动画（刷新后请等待2秒启动动画）p> div class=delay>div>body>
效果：
请按f5刷新动画（刷新后请等待2秒启动动画）
6）动画执行次数（animation-iteration-count）
animation-iteration-count：infinite |
infinite表示无限次数，number指定循环次数。
例子 源代码：
/* css代码 */.infinite{ width:100px; height:100px; background:#000; position:relative; -webkit-animation-name:fromlefttoright; -webkit-animation-duration:3s; -webkit-animation-iteration-count:infinite; -moz-animation-name:fromlefttoright; -moz-animation-duration:3s; -moz-animation-iteration-count:infinite; animation-name:fromlefttoright; animation-duration:3s; animation-iteration-count:infinite;}@-webkit-keyframes fromlefttoright{ 0% {left:0;} 100% {left:500px;} }@-moz-keyframes fromlefttoright{ 0% {left:0;} 100% {left:500px;} }@keyframes fromlefttoright{ 0% {left:0;} 100% {left:500px;} }
body> p>动画全自动无限循环播放p> div class=infinite>div>body>
效果：
动画全自动无限循环播放
7）动画的顺序（animation-direction）
设置对象动画在循环中是否反向运动
animation-direction : normal | reverse | alternate | alternate-reverse
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
例子 源代码：
/* css代码 */.box{ width:100px; height:50px; background:#ccc; margin:5px; position:relative; -webkit-animation-name:formlefttoright; -moz-animation-name:formlefttoright; animation-name:formlefttoright; -webkit-animation-duration:5s; -moz-animation-duration:5s; animation-duration:5s; -webkit-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; animation-iteration-count:infinite;}.reverse{ -webkit-animation-direction:reverse; -moz-animation-direction:reverse; animation-direction:reverse;}.alternate{ -webkit-animation-direction:alternate; -moz-animation-direction:alternate; animation-direction:alternate;}.alternate-reverse{ -webkit-animation-direction:alternate-reverse; -moz-animation-direction:alternate-reverse; animation-direction:alternate-reverse;}@-webkit-keyframes formlefttoright{ 0%{left:0;} 100%{left:500px;}}@-moz-keyframes formlefttoright{ 0%{left:0;} 100%{left:500px;}}@keyframes formlefttoright{ 0%{left:0;} 100%{left:500px;}}
body> p>四种不同的顺序p> div class=box>normaldiv> div class=box reverse>reversediv> div class=box alternate>alternatediv> div class=box alternate-reverse>alternate-reversediv>body>
效果：
四种不同的顺序
normal
reverse
alternate
alternate-reverse
8）动画的状态（animation-play-state）
设置对象动画的状态
animation-play-state：running | paused
running：运动
paused：暂停
例子 源代码：
/* css代码 */.state{ width:100px; height:100px; background:#000; position:relative; -webkit-animation-name:fromlefttoright; -webkit-animation-duration:3s; -webkit-animation-iteration-count:infinite; -moz-animation-name:fromlefttoright; -moz-animation-duration:3s; -moz-animation-iteration-count:infinite; animation-name:fromlefttoright; animation-duration:3s; animation-iteration-count:infinite;}.state:hover{ -webkit-animation-play-state:paused; -moz-animation-play-state:paused; animation-play-state:paused;}@-webkit-keyframes fromlefttoright{ 0% {left:0;} 100% {left:500px;} }@-moz-keyframes fromlefttoright{ 0% {left:0;} 100% {left:500px;} }@keyframes fromlefttoright{ 0% {left:0;} 100% {left:500px;} }
body> p>鼠标移动到矩形上可以暂停动画p> div class=state>div>body>
效果：
鼠标移动到矩形上可以暂停动画
9）动画时间之外的状态（animation-fill-mode）
设置对象动画时间之外的状态
animation-fill-mode ： none | forwards | backwards | both
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态
例子 源代码：
/* css代码 */.mode{ width:100px; height:100px; background:#000; position:relative; -webkit-animation-name:fromlefttoright; -webkit-animation-duration:3s; -webkit-animation-fill-mode:forwards; -moz-animation-name:fromlefttoright; -moz-animation-duration:3s; -moz-animation-fill-mode:forwards; animation-name:fromlefttoright; animation-duration:3s; animation-fill-mode:forwards;}@-webkit-keyframes fromlefttoright{ 0% {left:0;} 100% {left:500px;} }@-moz-keyframes fromlefttoright{ 0% {left:0;} 100% {left:500px;} }@keyframes fromlefttoright{ 0% {left:0;} 100% {left:500px;} }
body> p>请按f5刷新动画（动画结束后停在结束位置）p> div class=mode>div>body>
效果：
请按f5刷新动画（动画结束后停在结束位置）
10）动画复合属性（animation）
通过 animation ，我们能够创建自定义动画，这可以在许多网页中取代动画图片gif、flash 动画以及 javascript。
animation： || || || || || || || [ ,*]
利用学过的动画样式，制作一个下滑菜单栏
源代码：
/* css代码 */.dropmenu{ width:100px; height:30px; line-height:30px; text-align:center; background:green; border-radius:10px; overflow:hidden;}.dropmenu a{ font-family:微软雅黑; font-size:18px; color:#fff; text-decoration:none;}.dropmenu ul{ list-style-type:none; padding:0; margin:0;}.dropmenu ul li{ background:#808080;}.dropmenu:hover{ -webkit-animation-name:slidedown; -moz-animation-name:slidedown; animation-name:slidedown; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;}@-webkit-keyframes slidedown{ 0% {height:30px;} 100% {height:155px;}}@-moz-keyframes slidedown{ 0% {height:30px;} 100% {height:155px;}}@keyframes slidedown{ 0% {height:30px;} 100% {height:155px;}}
body> div class=dropmenu> a href=###>菜单栏a> ul> li>a href=###>aaaa>li> li>a href=###>aaaa>li> li>a href=###>aaaa>li> li>a href=###>aaaa>li> ul> div>body>
效果：
菜单栏aaaaaaaaaaaa