transition 过渡动画 贝赛尔曲线

css知识点

transition
-moz-transition（Firefox）
-webkit-transition（Safari和Chrome）
-o-transition（Opera）

transition-property：过渡的css名称
transition-duration：过渡花费的时间
transition-timing-function：过度效果的时间曲线
transition-delay：过渡效果何时开始

transition-timing-function：
linear <==> cubic-bezier(0,0,1,1)
ease <==> cubic-bezier(0.25,0.1,0.25,1)
ease-in <==> cubic-bezier(0.42,0,1,1)
ease-out <==> cubic-bezier(0,0,0.58,1)
ease-in-out <==> cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n,n,n,n)

.plus {
    position: absolute;
    transition: all 2s cubic-bezier(0, 0.5, 0.8, 1);
    -moz-transition: all 2s cubic-bezier(0, 0.5, 0.8, 1); /* Firefox 4 */
    -webkit-transition: all 2s cubic-bezier(0, 0.5, 0.8, 1); /* Safari 和 Chrome */
    -o-transition: all 2s cubic-bezier(0, 0.5, 0.8, 1); /* Opera */
    left: 0;
    top: 50px;
    color: red;
    font-weight: bold;
    font-size: 1.2em;
}