3D http://fangyexu.com/tool-CSS3Inspector.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .box { width: 100px; height: 100px; background-color: #F00; /*transition-property: all; transition-duration: 4s; transition-timing-function: ease; transition-delay: 2s;*/ transition:bacground 4s linear 2s, width 2s ease-in 1s; color: #FFF; } .father:hover .box { margin-left: 500px; } .linear { transition-timing-function: linear; } .ease { transition-timing-function: ease; } .ease-in { transition-timing-function: ease-in; } .ease-out { transition-timing-function: ease-out; } .ease-in-out { transition-timing-function: ease-in-out; } .cubic-bezier { transition-timing-function: cubic-bezier(0.9, 1.26, 0.11, -0.9); } </style> </head> <body> <div class="father"> <div class="box linear">linear</div> <div class="box ease">ease</div> <div class="box ease-in">ease-in</div> <div class="box ease-out">ease-out</div> <div class="box ease-in-out">ease-in-out</div> <div class="box cubic-bezier">cubic-bezier</div> </div> </body> </html>