CSS3 变形/ 变换 动画知识概述

CSS3 变形/变换

只能用块状元素或者inline-block;

相关属性

• transform 设置或检索对象的转换
• transform-origin 设置以某个原点进行转换
• transform-style: flat/preserve-3d 指定某元素的子元素是位于三维空间内，还是平面
• perspective: 长度单位 指定观察者与【z=0】平面的距离
• perspective-origin 设置透视点的位置
• backface-visibialbe: visible/hidden 指定元素背面面向用户时是否可见

变形方法 transform-function

• 2d位移

  • translate()
  • translatex()
  • translatey()

• 2d缩放

  • scale(数字)
  • scalex()
  • scaley()

• 2d旋转

  • rotate()

• 2d扭曲

  • skew(x,y)
  • skewx()
  • skewy()

• 3d

  • translatez()
  • translate3d()
  • scalez()
  • scale3d()
  • rotatex()
  • rotatey()
  • rotatez()

CSS过渡

相关属性

• trasition
• transition-property 指定哪些属性过渡 如果有多个值中间以逗号分隔

  • all默认所有

  • none 不设置属性过渡

    哪些css属性可以被过渡：
    颜色值、具有长度值、百分比的属性、
    值是数字的属性 如 z-index opacity outline-offset等
    变形系列属性
    阴影
    渐变

• transition-timing-function 过渡类型
  • ease 平滑过渡
  • linear 线性过渡
  • ease-in 由慢到快
  • ease-out 由快到慢
  • ease-in-out 由慢到快在到慢
• transition-duriation 设置对象过渡的持续时间
• transition-delay 延迟过渡时间

触发时机

• 伪类选择器
• JS
• 媒体查询

CSS3 动画

相关属性

• animation

• 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-diretion 设置对象动画在循环中是否反向运动

  normal 默认正常反向
  reverse：反方向运行
  alternate:动画先正常运行在反向运行，并持续交替运行

• animation-play-state: 设置对象动画才状态 running/pasused

• animation-fill-mode: 设置对象动画时间之外的状态

  none：默认
  forwards 设置状态为动画结束时的状态
  backgrounds:设置状态为动画开始时的状态。

关键帧

keyframes 动画名称{

form{
}
to{
}
}

动画应用（车轮滚动）：