使用动画让元素动起来：
CSS动画源码：
<!DOCTYPE html> <html> <head> <meta charset="gbk" /> <title>test</title> <style> .animated { animation-duration: 1s; /*动画时间*/ animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/ animation-fill-mode: both; /*播放后的状态,none=不改变默认行为;forwards=保持最后一个属性值（在最后一个关键帧中定义）;backwards=animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）;both 向前和向后填充模式都被应用。*/ } .animated-up{ animation-name:keyframes-move-up; /*动画的名称*/ } .animated-right{ animation-name:keyframes-move-right; /*动画的名称*/ } .box { background: rgba(45,151,219,.8); padding: 5px; color: white; text-align: center; margin:5px; } .box:hover{ animation-play-state:paused;/*停止晃动*/ -webkit-animation-play-state:paused; cursor: pointer; } /**上下晃动动画**/ @keyframes keyframes-move-up{ 0%, 100%, 20%, 50%, 80% { transform: translate3d(0,0,0); } 40%{ transform: translate3d(0,-8px,0); } 70%{ transform: translate3d(0,-6px,0); } 90%{ transform: translate3d(0,-4px,0); } } /**左右晃动动画**/ @keyframes keyframes-move-right{ 0%, 100%, 20%, 50%, 80% { transform: translate3d(0,0,0); } 40%{ transform: translate3d(8px,0,0); } 70%{ transform: translate3d(6px,0,0); } 90%{ transform: translate3d(4px,0,0); } } </style> </head> <body > <div class="box animated animated-up">上下晃动</div> <div class="box animated animated-right">左右晃动</div> </body> </html>