.c1,.c2,.c3,.c4,.c5 { margin-top:10px; color:#fff; } .c1 { background:blue; width:100px; height:50px; transition:width 10s; transition-timing-function:linear; } .c:hover .c1 { width:1000px; } .c2 { background:blue; width:100px; height:50px; transition:width 10s; transition-timing-function:ease; } .c:hover .c2 { width:1000px; } .c3 { background:blue; width:100px; height:50px; transition:width 10s; transition-timing-function:ease-in; } .c:hover .c3 { width:1000px; } .c4 { background:blue; width:100px; height:50px; transition:width 10s; transition-timing-function:ease-out; } .c:hover .c4 { width:1000px; } .c5 { background:blue; width:100px; height:50px; transition:width 10s; transition-timing-function:ease-in-out; } .c:hover .c5 { width:1000px; }