1 转换
转换的属性 :transform
属性值 : transform-function none
转换原点 旋转过程中 ：默认是元素中心点处
属性：transform-origin
2 2 D 转换
位移： 位置的变化
缩放： 元素大小的变换 缩小 0-1 放大>1
旋转：安照一定角度 实现旋转 相当于方向改变
位移： 函数 translate(x)
缩放： 元素大小的变换 缩小 0-1 放大>1 scale（参数）
旋转：安照一定角度 实现旋转 相当于方向改变 rotate(ndeg) n为正 顺时针旋转
倾斜 skew(xdeg) 以x轴为准 skewY(20deg) 沿Y轴倾斜
3 3D转换
perspective假定人眼投射到平面的距离
该属性必须定义在父元素上 其子元素能够实现3d转换的效果
注意浏览器兼容
-webkit-perspective 兼容IE和谷歌
-o-perspective 兼容欧朋
-moz-perspective 兼容火狐
属性：transform
位移： transformZ(z);沿z轴
transform3D(x,y,z);沿xyz3个轴旋转
旋转： rotateY(ndeg)；deg角度
rotate(x,y,z,ndeg);
4 过渡
什么是过度：
css样式属性值在一段时间内平滑的过度
属性：transition-property
取值：none 没过渡
all 所有过渡
property
允许过度的属性： 颜色 取值为数值的属性 转换-transform 渐变属性 visibility
5 过渡
属性 transition-duration 取值 s|ms 时间过渡
6 设置过度时间曲线函数
属性： transition-timing-function
取值： ease 匀速
ease-in 加速
ease-out
ease-in-out 先加速 后减速
7 过度延迟
transition-delay
8 动画效果
关键帧 控制动画的每一步
8.1 处理兼容性问题
-moz- 兼容火狐
-webkit- 兼容IE和谷歌
-o- 兼容欧朋
-ms-
8.2 怎么来使用
1 生明动画
创建一个动画 并且指定名称 通过@keyframes 关键词生明动画的关键帧
2 为元素调用动画 动画名称
播放时间
、播放的次数
播放的方向
语法
@keyframs 动画名称{
from |0%{
//动画开始的动作 css样式
}
50%{
//动画中间的动作 css样式
}
to|100%{
//动画结束的动作 css样式
}
}
调用动画名称
属性 animation-name:
动画执行时间长度
aanimation-duration
动画执行的曲线函数
animation-timing-function 取值：ease 匀速
animation-iteration-count:infinite 无线播放次数
animation-direction-alternate 动画播放方向
alternate 轮流播放 normal 默认 reverse 逆向播放
aniation -play-state 指定动画运行还是赞同 paused