相关属性
css 动画相关的属性有 transition 和 animation, 一般用这两个属性配合其他属性实现动画效果.
transition
transition 是转变, 将指定的 css 属性从一个值转变为另一个值.
他的子属性:
-
transition-property -
transition-duration -
transition-timing-function -
transition-delay
可以监听元素的 transitioned 事件来获取 transition 结束状态. 监听方式同 dom
元素的其他事件一样.
animation
animation 是动画, 配合 keyframe 使用. keyframe 定义一个动画, 包含动画的一些关键帧的 css 属性.
他的子属性:
-
animation-delay -
animation-direction -
animation-duration, -
animation-iteration-count -
animation-name -
animation-play-state -
animation-timing-function -
animation-fill-mode
animation 的几个事件:
-
animationstart -
animationend -
animationiteration
timing-function
-
transition-timing-function -
animation-timing-function
transition-timing-function 和 animation-timing-function 有两种类型的值:
-
三次方贝塞尔曲线(cubic-bezier)函数.
- liner
- ease
- ease-in
- ease-out
- ease-in-out
- cubic-bezier(n, n, n, n)
-
step 函数
- step-start
- step-end
- steps(n, [, [start|end]]?)
transform 属性
transform 是变形, css3 的一个重要属性, 他常和 transition 和 animation 一起来实现一些动画.
transform 有 2d 和 3d 两种:
- matrix(n, n, n, n, n, n)
- matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)
- translate(x, y) 平移
- translate3d(x, y, z)
- translateX(x)
- translateY(y)
- translateZ(z)
- scale(x, y) 缩放
- scale3d(x, y, z)
- scaleX(x)
- scaleY(y)
- scaleZ(z)
- rotate(angle) 旋转
- rotate3d(x, y, z, angle)
- rotateX(angle)
- rotateY(angle)
- rotateZ(angle)
- skew(x-angle, y-angle) 拉伸
- skewX(angle)
- skewY(angle)
- perspective(n) 激活 3d 透视图
相关属性
- transform-style: preserve-3d|flat
- backface-visibility: hidden|visible
matrix
matrix 是 transform 属性的一个值, 通过对元素坐标进行矩阵运算达到变形效果. 设置 matrix 参数达到不同变形效果.
transform 的几个值 translate, scale, rotate, skew 都是 matrix的快捷方式.
二维图形变换通过与一个 3维方阵 相乘得到. 实际需要 6 个值, 所以 matrix() 需要 6 个参数.
三维图形变换通过与一个 4维方阵 相乘得到. matrix3d() 需要 16 个参数.