CSS3 transition and animation简单理

讲解得非常好的一篇文章：
css3中的变形（transform）、过渡(transtion)、动画(animation)

transition

CSS中的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。
transition这个过程往往是从状态a切换到状态b，所以往往需要类似鼠标移入、点击等事件来触发状态的切换，从而触发transition。
transition: property || duration || time-function || delay

• property: 不是所有的CSS property都可以实现transition效果。
• duration: 单位可以是s也可以是ms。
• timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier
• cubic-bezier(x1,y1,x2,y2),取值都要在[0,1]之间；
• delay: 决定改变元素属性值后多长时间开始执行transition效果。

一个栗子：

<style>
      div{
            margin: 100px;
            text-align: center;
            width:100px;
            height:100px;
            background: #00f;
            -webkit-transition: all 1s ease .1s;
            -moz-transition: all 1s ease .1s;
            -o-transition: all 1s ease .1s;
            transition: all 1s ease .1s;
        }
        div:hover{
            background: #f00;
            transform: translateX(100px) rotate(45deg);
        }   
</style>

结果：

transition.gif

可以看到颜色过渡和transform过渡是同时进行和完成的,如果想要错开多个过渡，可以利用transition的delay属性。

animation

transition可以看成是两个状态之间的切换，但是对于animation来说，中间会有很多个状态，于是我们引入“keyframes”关键帧，语法如下：

@keyframes "name"{
    from{
      //css rules
    }
    percentage{
      //css rules
    }
    to{
     //css rules
    }
}

然后我们在要应用动画的元素的CSS style中定义animation的几个property：

• animation-name：keyframes定义的name,
• animation-duration，
• animation-timing-function:与transition的六个选项一致
• animation-delay，
• animation-iteration-count:动画重复次数
• animation-direction: normal | alternative
• animation-play-state: running | paused
  在动画结束之后，元素的CSS style会回到默认样式，动画中定义的CSS样式都会被清除。

一个栗子

        <style>
            @keyframes move {
                from{
                    margin-left: 100px;
                    background-color:pink;
                }
                20% {
                    margin-left: 150px;
                    background: red;
                }
                40% {
                    margin-left: 200px;
                    background-color:purple;
                }
                60% {
                    margin-left: 150px;
                    background-color: red;
                }
                to {
                    margin-left:100px;
                    background-color: pink;
                }
            }
            div{
                width: 100px;
                height: 100px;
                margin-left: 100px;
                text-align: center;
                background:pink;
                animation: move 5s linear;
            }           
        </style>

结果：

animation.gif

嵌套使用animation

嵌套使用animation可以解决两个问题：

1. 公用动画的抽取
2. 避免动画的覆盖冲突