css3-d ，动画，圆角

一、3D

开启元素3D
transform-style: preserve-3d;

Z轴 正数 屏幕外，反之屏幕内

近大远小
perspective: length (必须大于等于0) -- 在3D元素中设置，所有子元素统一生效。

transform: perspective(200px) -- 给3D元素的子元素单独设置景深

景深中心点：设置“观察者”位置。
perspective-origin: x y

背面是否可见

backface-visibility:

- hidden: 元素背面朝向观察者不可见。

在火狐中，必须配合
transform: translateZ(0);

 

二、动画

animation-name: 关键帧名, 关键帧名2
animation-duration: 动画一个播放周期持续的时间。
animation-delay: 延迟时间
animation-timing-function: 设置动画效果（三次贝塞尔曲线）

每一帧的播放顺序
animation-direction
- alternate 交替反向执行
- reverse 反向执行
- alternate-reverse 反向交替执行

控制播放次数
animation-iteration-count：
number
infinite 无限次播放

暂停
animation-play-state
running
paused 暂停（一般配合状态伪类使用）

填充：动画开始或者结束后使用第一帧或者最后一帧填充
animation-fill-mode：

backwards: 动画开始前，显示第一帧，（需要设置延迟执行时间）
forwards：动画开始后，显示最后一帧
both: 动画开始前，显示第一帧，（需要设置延迟执行时间）,动画开始后，显示最后一帧

注意事项：没有绝对的第一帧和最后一帧，与动画的播放顺序有关。

简写:
animation: 无顺序要求，如果出现两个时间，最后一个代表延迟时间。
与过渡类似，也存在样式覆盖问题。

 

//定义动画变化的规则
@keyframes 关键帧名 {

0% ~ 100%{
css样式（有部分样式不支持）
}

第一帧：0%{}, from{}
最后一帧：100%{}, to{}

//备注：每一帧的变化自动有补间动画，无需设置过渡效果

}

三、查看某一CSS样式在各浏览器支持情况
http://www.caniuse.com

四、圆角

border-radius: 左上，右上，右下，左下
border-radius: 左上，右上，右下，左下（x轴半径） / 左上，右上，右下，左下（y轴半径）