一、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轴半径)