CSS3 transition下不同过渡类型效果展示实例页面

CSS代码：

.trans_list {
    width: 10%;
    height: 64px;
    margin:10px 0;
    background-color:#486AAA;
    color:#fff;
    text-align:center;
}
.ease {
    ...
    transition: all 4s ease;
}
.ease_in{
    ...
    transition: all 4s ease-in;
}
    .
    .
    .
.trans_box:hover{
    margin-left:89%;
    background-color:#BECEEB;
    color:#333;
    ...
    border-radius:25px;        
    ...
    transform: rotate(360deg);        		
}
                

HTML代码：

<div id="transBox" class="trans_box">
    <div class="trans_list ease">ease</div>
    <div class="trans_list ease_in">ease-in</div>
    <div class="trans_list ease_out">ease-out</div>
    <div class="trans_list ease_in_out">ease-in-out</div>
    <div class="trans_list linear">linear</div>
</div>