<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ background: #639; width: 235px; height: 216px; position: absolute; top: 300px; left: 300px; } /*nimation-delay:1s*/ @keyframes arrow1{ 0%{transform: translateY(0);} 100%{transform: translateY(10px);} } @-webkit-keyframes arrow1{ 0%{-webkit-transform: translateY(0);} 100%{-webkit-transform: translateY(10px);} } .arrow{ animation: arrow1 2s infinite; -webkit-animation: arrow1 2s infinite; animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction:alternate; animation-direction:alternate; } </style> </head> <body> <div class="arrow"> <img src="http://paas.mail.10086.cn/res/build/images/c04.png" /> </div> </body> </html>
原文：http://www.cnblogs.com/dhsz/p/6553671.html