CSS3摆动动画效果

最新推荐文章于 2024-06-11 22:32:41 发布

原创最新推荐文章于 2024-06-11 22:32:41 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

1 篇文章

订阅专栏

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);
	}
}