CSS3のtransition-timing-function動きデモ

CSS3のtransitionやanimationでアニメーションの動きを指定するtiming-functionの実際の動き方を見るためにデモを作ってみました。

プレビュー

↓別ウィンドウを開いて見る
transition-timing-functionの動きデモ - js do it

コード

HTML

<div id="transition">
    <div id="ease">ease</div>
    <div id="linear">linear</div>
    <div id="ease-in">ease-in</div>
    <div id="ease-out">ease-out</div>
    <div id="ease-in-out">ease-in-out</div>
</div>

CSS

#transition{
    width:435px;
    background:#eee;
    padding:10px 5px 5px;
    border : 1px solid #333;
}
#transition div{
    width:80px;
    height:70px;
    color:#fff;
    font-weight:bold;
    border-radius:5px;
    text-align:center;
    padding:3px 5px;
    margin:0 0 10px;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 2s;
}
#transition:hover div{
    -webkit-transform:translate(350px);
}
#ease{
    background-color:#2D89F0;
    -webkit-transition-timing-function:ease;
}
#linear{
    background-color:#01A31C;
    -webkit-transition-timing-function:linear;
}
#ease-in{
    background-color:#D44A26;
    -webkit-transition-timing-function:ease-in;
}
#ease-out{
    background-color:#BC1C48;
    -webkit-transition-timing-function:ease-out;
}
#ease-in-out{
    background-color:#603CBA;
    -webkit-transition-timing-function:ease-in-out;
}