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{
        }
    }