<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{width: 50px;height: 120px;margin-top: 500px;margin-left: 500px} .box2{width: 50px;height: 120px;background: black;} .box{ animation: top1 1s ease-out forwards} .box2{ animation: right1 1s ease-in forwards ;} @keyframes top1 { 0%{transform: translateY(0px) ;} 100%{transform: translateY( -200px) ;} } @keyframes right1 { 0%{transform: translateX(0px) rotate(0deg);} 100%{transform: translateX(200px) rotate(90deg);} } </style> </head> <body> <div class="box"> <div class="box2"></div> </div> </body> </html>
原文：http://www.cnblogs.com/xiaobaibubai/p/7060189.html