<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{ padding:0margin:0font-size:14px }
body{
background: grey
}
.d{
position:fixedmargin:autoleft:0right:0bottom:24pxwidth: 160pxheight:120px
animation: d1 3s linear animation-fill-mode: both
}
@keyframes d1{
from{
bottom: 24px
}
to{
bottom: 360px
}
}
.d img{
height:120pxposition: absolutemargin:autoleft:0top:0animation: d2 2s 3s linear infinite animation-fill-mode: both
}
@keyframes d2{
0%,100%{
transform:rotate(0deg)
}
50%{
left: 40px
transform:rotate(90deg)
}
}
</style>
</head>
<body>
<div class="d">
<img src="http://aimusic.image.alimmdn.com/Image/6d235b11f15838d6711ec6b0ca5e1a32.png"/>
</div>
</body>
</html>
并没有出现你描述的情况，谷歌浏览器下，确实是以顶部中心点为轴心左右摆动。
如果你不是，查看下代码，是否样式出现了覆盖的情况。
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Document</title>
<style type="text/css">
.rot{-webkit-animation:rot 3s linear}
@-webkit-keyframes rot{
0%,20%,40%,60%,80%,100%{transform-origin:top center}
0%{transform: rotate(0deg)}
20%{transform:rotate(20deg)}
40%{transform:rotate(-15deg)}
60%{transform:rotate(10deg)}
80%{transform:rotate(-5deg)}
100%{transform:rotate(0deg)}
}
</style>
</head>
<body>
<img src="pcj/aa/img/h_icon.png" class="rot" />
</body>
</html>
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.demo{
width:200px
height:10px
background:-webkit-linear-gradient(left, rgb(80,80,255,0.2) , #fff) /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left, rgb(80,80,255,0.2) , #fff)/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left, rgb(80,80,255,0.2) , #fff)/* Firefox 3.6 - 15 */
background: linear-gradient(to left, rgb(80,80,255,0.2) , #fff)/* 标准的语法 */
}
</style>
</head>
<body>
<div class="demo" ></div>
</body>
</html>
