CSS3 Transform & Transition & Animation

CSS3 Transforms

transform 性质通过以下的方法实现让元素改变形状、大小和位置的效果。transform-origin 性质可以用来改变已经变换过的元素。

Related 2D transform methods:

• translate(x, y) 移动: move an element from its current position according to the parameters given for the left(X-axis) and thetop (Y-axis) position
• rotate(angle) 旋转: rotates clockwise(沿顺时针方向的) at a given degree. Negative values are to rotates the element counter-clockwise (逆时针方向的)
• scale(x, y) 缩放: increases or decreases the size, according to the parameters given for thewidth(X-axis) and the height (Y-axis)
• skew(x-angle, y-angle) 扭曲: turns an element in a given angle (按照给定的角度歪斜), along thehorizontal(X-axis) and the vertical (Y-axis) lines
  
• matrix(n, n, n, n, n, n) 矩阵变化: 把所有的2D变换组合到一个函数里, 具体使用方法参看这里
  

注意：同时提供 translateX(n), translateY(n), scaleX(n), scaleY(n), skewX(angle), skewY(angle) 方法,

Related 3D transform methods:

• rotateX(x) 沿X轴水平旋转
• rotateY(y) 垂直旋转
• rotateZ(z)

合写形式是rotate3d(x, y, z)，同样适用于 translate3d(x, y ,z)，scale3d(x, y, z). 把所有3d变换组合到一个函数里用 matrix3d(), 使用4×4的矩阵，共需16个值。

CSS3 Transitions

transition property let you change property values smoothly (from one value to another), over a given duration.

该性质使元素在给定的时间段里平滑地改变属性值。transition 写在元素的默认状态里。

为实现特效（过渡）, you must specify two things:

• transition-property，CSS property you want to add an effect to,
  
• transition-duration， duration of the effect,默认值为0，所以不指定区间，transition就没有效果。

transition 性质实际上是四个 property 的合写形式，除包含以上两个性质，还包括 transition-timing-function （默认是ease，slow start， then fast then slowly end）和 transition-delay

Tips： 一个 transition 可以同时控制多个property的变换过程, 以逗号分隔开。transition: width 2s, height 4s;。

CSS3 Animations

要使用 CSS3 animation，必须先为动画指定一些 keyframes，写上元素样式变化，then bind it to a selector,

@keyframes 要在使用它之前就定义好（指代码位置）。

然后要指定以下两个性质:

• animation-name 动画名称（即定义的@keyframes rule的名字）
• animation-duration 持续时间

You can specify when the change will happen in percent, or you can use the keywords "from" and "to" (which represents 0% 动画开始 and 100% 动画完成).

/* The animation code */
@keyframes example {
    0%   {background-color: red; left:0px; top:0px;}
    25%  {background-color: yellow; left:200px; top:0px;}
    50%  {background-color: blue; left:200px; top:200px;}
    75%  {background-color: green; left:0px; top:200px;}
    100% {background-color: red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

animation 性质实际上是六个性质的合写形式，除了上面提到的两个性质，还包括 animation-timing-function（默认值是ease）、animation-delay、animation-iteration-count （设定动画播放次数，可以是integer数字或关键字 infinite，默认值是1）、animation-direction。

此外，还有animation-fill-mode（指定当动画结束或有delay时给元素apply一些style，可以取值：none 默认值，forwards，backwards，both）

其中，forwards（tells the browser to stop the animation on the last keyframe at the end of the last iteration and not revert back to its pre-animation state），backwards（makes the element go directly to keyframe 0% when the page loads, even if there is an animation-delay, staying there until the animation starts），both（applies both backwards and forwards, sitting on the first keyframe until the animation begins (no matter the length of the positive animation delay) and staying on the last keyframe at the end of the last animation）