CSS动画相关知识点

Transform

transform

• matrix:css中关于变换的操作都是由matrix和matrix3d实现的。前者是2D平面的移动，后者是3D变换。

transform

• 设置对检索对象的转换。其中分为2D Transform和3D Transform两部分。2D Transform取值具体如下：

  1. matrix()：以一个含6个值的(a,b,c,d,e,f)变换矩阵的形式制定一个2D变换，相当于直接应用[a,b,c,d,e,f]变换矩阵。
  2. translate()：指定对象的2D平移。第一个参数对应x轴，第二个参数对应y轴，若第二个参数没有，默认为0。
  3. translateX()：指定对象X轴（水平方向）的平移。
  4. translateY()：指定对象Y轴（垂直方向）的平移。
  5. rotate()：指定对象的2D旋转，需要先定义transform-origin属性。
  6. scale()：指定对象的2D缩放。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值。Zoom是改变视图的显示大小，scale是改变图形尺寸的大小！
  7. scalex()：指定对象X轴的（水平方向）缩放。
  8. scaley()：指定对象Y轴的（垂直方向）缩放。
  9. skew()：指定对象的斜切扭曲。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认为0。
  10. . skewx()：指定对象X轴的（水平方向）扭曲。
  11. . scaley()：指定对象Y轴的（垂直方向）扭曲。

• 3D Transform同理，具体取值如下：

  1. matrix3d()：以一个4x4矩阵的形式指定一个3D变换。
  2. translate3d()：指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略。
  3. translateZ()：指定对象Z轴的平移。
  4. rotate3d()：指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略。
  5. rotateX()：指定对象在x轴上的旋转角度。
  6. rotateY()：指定对象在y轴上的旋转角度。
  7. rotateZ()：指定对象在z轴上的旋转角度。
  8. scale3d()：指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略。
  9. scaley()：指定对象Y轴的（垂直方向）缩放。
  10. . scalez()：指定对象的z轴缩放。
  11. . perspective()：指定透视距离。

• transform几个值的先后问题：先旋转（改变坐标系），再通过translateZ进行定位。

matrix矩阵扩展

• transform的matrix()是其他变换的基础，可以通过配置参数扩展为其他的变换。写法如下：

    transform: matrix(a,b,c,d,e,f);
  

  其对应的矩阵如下：

  

  则初始坐标x,y可以构成一个3*1的矩阵(x,y,1)，两个矩阵相乘，可以算出变换后的坐标x',y',得出一个3*1的矩阵(x',y',1)。如下图所示：

  

  此时，变换后的坐标即为 x'= ax+ cy+ e, y'= bx+ dy +f。

• 因此，几个矩阵变换的转换如下：

  1. 平移： transform: matrix(1, 0, 0, 1, tx, ty) == transform: translate(tx,ty)
  2. 缩放： transform: matrix(sx, 0, 0, sy, 0, 0) == transform: scale(sx,sy)
  3. 旋转： transform: matrix(cosθ,sinθ,-sinθ,cosθ,0,0) == transform: rotate(θ)
  4. 拉伸： transform: matrix(1,tan(θy),tan(θx),1,0,0) == transform: skew(tx,ty)

• matrix3d同理，为一个4*4的矩阵定义一个3D变换的序列。

scale和zoom的区别

1. zoom的缩放是相对于左上角的；scale的缩放是相对于transform-origin的
2. zoom的缩放改变了元素占据的空间大小，scale缩放占据原始尺寸不变，页面布局不发生变化。
3. zoom渲染图片比较锐利，scale渲染比较模糊。
4. 对文字的缩放规则不一样。zoom受限于最小12px中文大小限制，scale则是纯粹地图形进行比例控制。
5. 渲染的性能差异比较明显。由于zoom缩放会改变元素的真实大小，因此zoom改变会引起整个页面的重新渲染，scale只是在当前的元素上重绘。
6. scale和zoom的缩放效果会叠加。

点我查看DEMO

坐标系统 transform-origin

• transform旋转默认是绕着中心点进行旋转，也就是transform-origin对应的点，若对该属性重新设置的时候，矩阵相关计算的中心店也改变了，例如-webkit-transform-origin: bottom left;将坐标中心点移到左下角，transform-origin: 50px 70px;将坐标移动到距离左侧50px，顶部70px的地方。此时（30，30）为图中所示的点。

• 有两个参数值，一个是横坐标，一个是纵坐标。如果只提供一个，将用于横坐标，纵坐标默认为50%。

• 默认值为50% 50%,可以取值如下：

  1. <percentage>：百分比制定坐标，可以为负。
  2. <length>：用长度指定坐标，可以为负。
  3. left：指定原点的横坐标为left。
  4. center：指定原点的横坐标为center。
  5. right：指定原点的横坐标为right。
  6. top：指定原点的纵坐标为top。
  7. center：指定原点的纵坐标为center。
  8. bottom：指定原点的纵坐标为bottom。

transform-style

• 指定某元素在三维空间内还是在平面内。若想改变变换元素所处的方式，需要在该元素的父元素上定义transform-style属性。取值上有preserve-3d和flat两个值。flat为默认值，表示所有子元素在2D平面呈现，preserve-3d表示在三维空间内。

perspective

• 指定观察者与[z=0]平面的距离，产生透视效果。[z>0]时比正常大，[z<0]时比正常小。默认值为none，可以取长度值表示与[z=0]平面的距离，不允许负值。

• perspective有两种书写，一种是用在舞台元素上（该动画元素的父辈元素上），另一种是用在当前的动画元素上，与transform其他属性在一起。

  1. 舞台元素上：

  .stage {
    perspective: 600px;
  }
  

  1. 当前动画元素上：

  #stage .box {
    transform: perspective(600px) rotateY(45deg);
  }
  

perspective-origin

• 指定透视点的位置，该属性有两个数值，默认为center,center。如果提供一个，将用于横坐标，纵坐标将默认为center。

backface-visibility

• 指定元素背面面向用户时是否可见。有两种取值，可见visible和不可见hidden，默认为visible。
• 需要直接在该元素上定义backface-visibility属性，不能在其父元素上，因为该元素不可继承。

demo(backface-visibility的应用)

公司官网transform元素应用

Transition

transition

• 检索或设置对象变换时的过渡。这是一个复合属性，顺序是[ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>
• 只有一个时间时，为transition-duration的定义，如果有两个的话，第二个为transition-delay的定义。

transition-property

• 检索或设置对象中的参与过渡的属性。默认值为all，默认为所有可以进行过渡的css属性，none表示不指定过渡的css属性，或者根据属性值单独指定。

transition-duration

• 检索或设置对象过渡的持续时间。

transition-timing-function

• 检索或设置对象中过渡的动画类型。默认为ease，有如下几种取值：

  1. linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
  2. ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)。
  3. ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)。
  4. ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)。
  5. ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)。
  6. steps：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
  7. step-start：等同于 steps(1, start)。
  8. step-end：等同于 steps(1, end)。
  9. cubic-bezier：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内。

transition-delay

• 指定对象过渡的延迟时间。

Animation

animation

• 检索或设置对象所应用的动画特效。。这是一个复合属性，顺序是<single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
• 只有一个时间时，为animation-duration的定义，如果有两个的话，第二个为animation-delay的定义。

animation-name

• 检索或设置对象中的参与过渡的属性。检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义

animation-iteration-count

• 检索或设置对象动画的循环次数。默认值为1，当取infinite表示是无限循环。

animation-direction

• 检索或设置对象动画在循环中是否反向运动。默认值为normal，具体取值如下。
• 1. normal：正常方向
  2. reverse：反方向运行
  3. alternate：动画先正常运行再反方向运行，并持续交替运行
  4. alternate-reverse：动画先反运行再正方向运行，并持续交替运行

animation-play-state

• 检索或设置对象动画的状态。默认为running，运动状态，可设为paused为停止状态。

animation-fill-mode

• 检索或设置对象动画时间之外的状态。默认为none，取值具体含义如下。
• 1. none：不设置对象动画之外的状态
  2. forwards：设置对象状态为动画结束时的状态
  3. backwards：设置对象状态为动画开始时的状态
  4. both：设置对象状态为动画结束或开始的状态

animation中steps的应用

学习链接

前端中的变换矩阵

理解CSS3 transform中的Matrix(矩阵)

CSS3 3D transform变换