ease:開始と完了を滑らか linear:一定 ease-in:ゆっくり始まる ease-out:ゆっくり終わる ease-in-out:ゆっくり始まってゆっくり終わる #box { width: 70%; height: auto; background-color: #eee; margin: 50px auto; cursor: pointer; } #box div { width: 14%; height: 30px; padding: 0 0 0 5px; margin-bottom: 10px; background-color: #e95; } #box:hover div{ width: 100%; } .ease { -webkit-transition: all 2s ease; transition: all 2s ease; } .linear { -webkit-transition: all 2s linear; transition: all 2s linear; } .ease-in { -webkit-transition: all 2s ease-in; transition: all 2s ease-in; } .ease-in-out { -webkit-transition: all 2s ease-in-out; transition: all 2s ease-in-out; } .ease-out { -webkit-transition: all 2s ease-out; transition: all 2s ease-out; } .step-start { -webkit-transition: all 2s step-start; transition: all 2s step-start; } .step-end { -webkit-transition: all 2s step-end; transition: all 2s step-end; } .steps-4-start { -webkit-transition: all 2s steps(4,start); transition: all 2s steps(4,start); } .steps-4-end { -webkit-transition: all 2s steps(4,end); transition: all 2s steps(4,end); } .ease2 { -webkit-transition: all 2s ease 2s; transition: all 2s ease 2s; }