CSS3动画——animation

　　可以让页面中指定的元素按照设定的方式“动”起来，运用的是人视觉延迟的原理，连续地在上一张图消失之前插入下一张

animation属性值

1.animation-name

　　对象的动画名称，以便后续设置动画属性时使用

　　默认为none，如果设置的话即为要设置动画的关键帧的怀孕能吃螃蟹吗名字

　　后续对该元素设置动画时，要用@keyframes，设置起始的样式（from）和终止的样式（to）

2.animation-duration

　　动画持续的时间（播放完成所花时间）

　　默认值为0，可设置单位为秒（s）或毫秒（ms）

3.animation-timing-func永恒的童话tion

　　动画的过度方式

　　常用的有：linear（线性过渡）、ea（平滑过渡）、ea-in（由慢到快）、ea-out（由快到慢）、ea-in-out（由慢到快再到慢）

　　如有复杂需求，要设置贝塞尔曲线（cubic-bezier（数值1，数值2，数值3，数值4）），其中四个数值范围为0-1

4.animation-delay

　　动画开始前等待时间（该时间不包括在动画放映时间内）

　　默认值为0，可设置单位为秒（s）或毫秒（ms），如设置负值则立即开始动画

　　注：设置的时间带有小数点时，建议省去整数部分，如0.5写成.5

5.animation-interation-count

　　动画循环次数

　　值为数字，默认为1，也可设置infinite（无限循环）

6.ainmation-direction

　　动画循环时的方向

　　可设置的值有：none（保留原有样式，默认值）、rever（反向）、alternate（先正常再反向并交替进行）、alternate-rever（先反向再正常并交替进行）

　　其中alternate和alternate-rever必须在循环次数不为1时才生效

7.animation-fill-mode

　　动画不播放（已经放完/有延迟没播放）时的元素样式

　　可设置的值有：none（没有样式，默认值）、forwards（结束时状态）、backwards（开始时状态）、both（同时设置开始和结束时状态）

8.animation-play-state

　　动画状态，即播放/暂停

　　可设置的值有：running（播放，默认值）、pau（暂停）

9.animation的简写

　　其中必须设置name和duration

　　解析时，默认把第一个字符串属性值解析为name，第一个带有时间的属性值解析为duration，之后一个带有时间的属性值解析为delay

 /*按照每个元素来写的动画属性*/
 1 div{ 2     width:100px;height:100px; 3     animation-name:outside; 4     animation-duration:2s;         5     animation-timing-function:linear; 6     animation-delay:1s; 7     animation-iteration-count:infinite; 8     animation-direction:alternate-rever; 9     animation-fill-mode:forwards;10     animation-play-state:pau;11 }12 @k探索发现 考古中国eyframes outside{13     from{transform:translatey(0px);}14     to{transform:translatey(1000px);}15 什么是春季高考}

keyframes

　　通过控制关键帧来改变动画的播放效果，对手机端必须加上-webkit-

　　其中0%和100%可用from和to代替

 1 div{ 2     width:100px;height:100px;b民主评议ackground:black; 3     animation:here 5s linear infinite alternate-rever; 4 } 5 @-webkit-keyframes here{ 6        0% {capacity:0;} 7      25% {capacity:0.25;} 8      50% {capacity:0.5;} 9      75% {capacity:0.75;}10     100% {capacity:1;}11 }