***过渡 transition
- transition 检索或设置过渡效果
- transition-property 指定过渡的属性
- transition-duration 指定过渡的时间
- transition-timing-function 过渡效果
linear 规定以相同速度开始至结束的过渡效果
ease 规定从慢速开始.然后变快.然后慢速结束的过渡效果
ease-in 规定从慢速开始的过渡效果
ease-out 规定从慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果 - transition-delay 过渡的开始时间
总写:transition:all 2s linear 0s;
动画 animation
- animation 检索或设置对象所应用的动画特效
- animation-name 检索或设置对象所应用的动画名称
- animation-duration 检索或设置对象动画的持续时间
- animation-timing-function 检索或设置对象动画的过渡类型
- animation-delay 检索或设置对象动画延迟的时间
- animation-iteration-count 检索或设置对象动画的循环次数
- animation-direction 检索或设置对象动画在循环中是否反向运动
- animation-play-state 检索或设置对象动画的状态
- animation-fill-mode 检索或设置对象动画时间之外的状态
简写属性: animation:player 10s ease 0s 1 normal running;
2D变换 2D Transform
- transform 检索或设置对象的变换
- transform-origin 检索或设置对象中的变换所参照的原点
转换 transform
- rotate 旋转的四种方式
旋转1 ---- rotate 定义2D旋转.在参数中规定角度
旋转2 ---- rotateX 沿x轴的3D旋转.在参数中规定角度
旋转3 ---- rotateY 沿y轴的3D旋转.在参数中规定角度
旋转4 ---- rotateZ 沿z轴的3D旋转.在参数中规定角度
- scale 缩放的三种方式
缩放1 ---- scale 定义2D缩放转换
缩放2 ---- scaleX(x) 通过设置x轴的值来定义缩放转换
缩放3 ---- scaleY(y) 通过设置y轴的值来定义缩放转换
- skew 倾斜的三种方式
倾斜1 ---- skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
倾斜2 ---- skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
倾斜3 ---- skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。
- translate 移位的三种方式
移位1 ----- translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
移位2 ---- translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
移位3 ---- translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
- matrix 放大+倾斜
- perspective 透视图
- transform-origin 更换转换元素的位置