CSS3动画效果

=============================
CSS3 动画
=============================

开始样式>>结束样式
变化时间

中间过程渐变

1. animation动画
2. transition过渡
3. 2D、3D变形

一、animation动画
animation动画播放器
1.定义动画规则(@keyframes)
2.在样式中添加animation属性进行动画播放

//要使用(播放)的动画的规则名称
animation-name:string

//整个动画的历时 (单位：s、ms)，time是小数
animation-duration:time

//动画循环播放的次数(值是number | infinite)
animation-iteration-count:n|infinite
//infinite 无限循环

//动画播放的方向
animation-direction:normal|alternate
//默认：normal 总是从from-to或从0%-100%
//alternate 播放次数135...从from-to或从0%-100%
// 播放次数024...从to-from或从100%-0%

//设置动画播放器的播放状态(在JS中使用)
animation-play-state:paused|running
paused 暂停
running 播放

//控制动画填充模式(开始和结束的样子)
animation-fill-mode:none|forwards|backwards|both
// 默认：none
// forwards：动画应用结束的最后一帧(动画结束时保持最终样式)

//播放一次的时候，最终效果为动画最后一帧
// backwards: 动画应用开始的第一帧(由第一帧决定)
// both: forwards|backwards

//动画的播放步进(样式)
animation-timing-function:ease|linear
// 默认：ease 类似于缓冲的效果(开始和结束时较慢，中间较快)
// linear 线性(平滑的播放)

//在JS脚本中控制div1的动画播放循环次数
//将横杆去掉，后面的字母换成大写
div1.style.animationIterationCount=10;
//在JQuery中控制
$("#div1").css("animation-iteration-count",10);

div1.style.animationPlayState="paused";
$("#div1").css("animation-play-state","paused");

@keyframes 动画规则
1.from-to
@keyframes 动画规则名{
form{样式列表}
to {样式列表}
}
2.百分进度
@keyframes 动画规则名{
n%{样式列表}
}

二、transition过渡
检索或设置对象变换时的过渡。
transition-property:string 过渡的样式属性名

transition-duration:time 过渡的历时

transition-timing-function:ease|linear 过渡的步进效果

transition-delay:time 过渡开始的延迟

因为duration和delay都是time类型：
历时(duration)在前，延时(delay)在后

三、 2D、3D变形
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
CSS2
transform:none|transform-functions;

transform-functions可选方法
参阅：transform-functions.html

CSS3
transform 向元素应用 2D 或 3D 转换。

transform-origin：x-axis y-axis z-axis; 允许你改变被转换元素的位置。

transform-style: flat|preserve-3d; 规定被嵌套元素如何在 3D 空间中显示。
//flat: 子元素同父亲
//preserve-3d: 子元素保留自己的3D效果

//以下属性目前没有浏览器支持
perspective：number|none; 规定 3D 元素的透视效果。
perspective-origin:x-axis y-axis; 规定 3D 元素的底部位置。
backface-visibility:visible|hidden; 定义元素在不面对屏幕时是否可见。

动画效果展示
https://c.runoob.com/codedemo/3391