<meta charset="utf-8">
<style>
.animated {
animation-duration: 3s; /*动画时间*/
animation-fill-mode: both; /*播放后的状态*/
animation-iteration-count: infinite; /*动作循环的次数:infinite 无限循环*/
}
.icon-hot {
animation-duration: 0.8s; /*动画时间*/
animation-fill-mode: both; /*播放后的状态*/
animation-iteration-count: infinite; /*动作循环的次数:infinite 无限循环*/
animation-name:upAnimation; /*动画的名称*/
}
@keyframes upAnimation{
0%,
43%{
transform: translate3d(0,1px,0);
}
70%{
transform: translate3d(0,-3px,0px);
}
90%{
transform: translate3d(0,1px,0);
}
}
</style>
<img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" class="animated icon-hot">
<div>你好</div>