论CSS3 transform、translate、transition、animation

transform字义为“形变”，是指将某一元素进行2D/3D转换，使其相应地旋转、缩放、移动、倾斜。
常用方法有（详见w3c Transform方法）

• scale(x,y) 2D缩放
• rotate(deg) 2D旋转
• translate(x,y)也是其主要方法之一，是将元素相对位置进行位移。

*被 transform 的元素将默认拥有 “position: relative” 属性。

transition义为“过渡”，是CSS3实现动画的主要方法之一。
（从一种CSS样式过渡变幻到另一种CSS样式）
相应语法为：
transition: property duration timing-function delay;

• transition-property: 指定产生过度效果的CSS属性
• transition-duration: 过渡时间。必需值。
• transition-timing-function: 速度曲线(如: linear 将产生匀速过渡效果)
• transition- delay: 延迟时间。可以为负，负值代表直接从效果（相应时间）中途开始。

*值得留意的是，在不指明 transition-property 的情况下，所有变化的CSS属性都会触发过渡效果。
出于CSS代码维护的角度考虑，使用 transition 时应指定 transition-property。

通常情况，我们可以将 transition 与 transform 联合使用，以达到更好的效果：
为一个元素定义好 transition ，在合适的时机触发 transform.

//鼠标悬停时触发元素360度旋转
div {
    width: 100px; 
    height: 100px; 
    transition: transform 1s ease, width 2s;   //多个属性可以用逗号隔开
} 

div:hover { 
    transform: rotate(360deg);
    width: 200px; 
}

animation 顾名思义，它是CSS3的另一种动画实现方式，且效果上更为灵活多变。
animation的动画是由CSS3的 @key-frames 规则定义的：

@key-frames [animationName] {
    from {
        //css样式
    }
    to {
        //css样式
    }
}

from…to 亦可用百分比的形式进行多段划分以精细效果。
然后，以
animation: [animationName] duration timing-function delay interation-count direction; 执行效果

• animation-name: 即@key-frames定义的[animationName]，可任取；
• animation-duration: 执行一次动画的时间；
• animation-timing-function: 时间曲线。同transition;
• animation-delay: 延迟时间。同transition;
• animation-interation-count: 播放次数。（如：infinite 即无限执行）;
• animation-direction: 默认 normal。设置为 alternate 会反向执行。

* @key-frames 原则上是增添新属性 或 覆盖原有属性。
1. 如在元素中原先设定了 transform 效果， @key-frames 中再次设定 transform 会覆盖原定效果。
2. 在元素中设定如 top: 0 等效果，在 @key-frames 中新增如 bottom: 0 等效果， 可能无法得到预期的效果，因为top: 0 和 bottom: 0 会同时存在。

@key-frames move {
    0% {
        top: 0
    }
    100% {
        bottom: 0    //可能会无效
    }

div {
    position: absolute;
    top: 0;
    animation: move 2s;
}

---

*文章为个人见解和实践，错误之处欢迎指正。