CSS3 变形/变换
相关属性
- transform 设置或检索对象的检索（none 2D 3D）
- transform-origin：设置或检索对象以某个原点进行检索
- transform-style: flat（默认）指定子元素位于次元素所在平面内/preserve-3d 指定子元素定位在三维空间内
- perspective: 长度单位 指定观察者距离平面的距离
- perspective-origin 指定观察者的位置 left/right/center
- backface-visibialbe: visible(默认)/hidden
变形方法 transform-function
- 2d
- 位移
- translate(x,y)
- translatex()
- translatey()
- 缩放
- scale(x,y)
- scalex()
- scaley()
- 旋转
- rotate(deg)
- 倾斜
- skew(x,y)
- skewx()
- skewy()
- 3d
- 位移
- translatez()
- translate3d(x,y,z)
- 缩放
- scalez()
- scale3d(x,y,z)
- 旋转
- rotatex()
- rotatey()
- rotatez()
- rotate3d(x,y,zdeg)
CSS过渡
相关属性
- trasition
- transition-property 设置对象中的参与过渡属性 (可以设置多个属性值，以逗号隔开)
- 默认为all：所有可以进行过渡的css属性
- none:不指定过渡的css属性
- transition-timing-function 设置对象过渡持续的时间
- transition-duriation
- transition-delay
触发时机
- 伪类选择器
- JS触发
- 媒体查询
可以过渡的属性
- 长度
- 颜色
- 变换
CSS3 动画
相关属性
-
关键帧语法：@keyframes{from to }
-
animation 设置对象所应用的动画特效，如果提供多组属性值，以逗号进行分割
- 注意：如果只提供一个time参数，则为动画的持续时间；
- 若提供二个time参数，则第一个为持续时间，第二个为拖延时间
- animation-name 设置对象所应用的动画名称（必须与规则@keyframes配合使用，因为动画名称由@keyframes定义）
- animation-duration 设置对象动画的持续时间
- animation-timing-function 设置对象动画的过渡类型
- 值：ease(默认)平滑过渡，由快到慢
- linear: 线性过渡
- ease-in:由慢到快
- ease-out:由快到慢
- ease-in-out:由慢到快再到慢
- animation-delay：指定对象动画的拖延时间
- animation-iteration-count 循环次数
- number：动画循环次数
- infinite:无线循环
- animation-dirction 设置对象动画在循环中是否反向运动
- normal 正常反向（默认）
- reverse 反方向运行
- alternate:动画先正常运行后反向运行，并持续交替运行
- alternate-reverse:动画先反向运行后再正向运行，并持续交替运行
- animation-play-state: 设置对象动画的状态running（默认）/pasused
- animation-fill-mode: 设置对象动画时间之外的状态
- none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素
- forwards 在动画结束后（由animation-literation-count决定），动画将应用该属性值
- backwards:动画将应用在animmation-delay定义期间启动动画的第一次迭代的关键帧中定义的属性值
- both 动画遵循forwards和backwards的规则。也就是说，动画会在两个方向上扩展动画属性
关键帧
#keyframes 动画名称{
form{
}
to{
}
}