CSS3摆动动画效果
<view>
<image class="swing" src="/image/ld@2x.png"></image>
</view>
transform-origin、webkit-transform-origin为抖动的原点,可取left、right、top、bottom、center
.swing{
animation:move 3s 0s infinite;
-webkit-animation:move 3s 0s infinite;
transform-origin:top;
-webkit-transform-origin:top;
height: 200rpx;
width: 200rpx;
}
@keyframes move
{
0%, 65%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
70% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
75% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
80% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
85% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
90% {
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
}
95% {
-webkit-transform:rotate(-6deg);
transform:rotate(-6deg);
}
100% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
}