CSS3左右间歇晃动效果

今天在做一个活动页面时，产品想要在页面中添加一个吸引人注意的小图片左右晃动的效果，并且该效果是间歇执行的。我一想应该挺简单的吧，二话没说就答应了，谁知在真正实现的时候才发现还是有些许困难的。于是就在网上各种找资料，找的过程中，只是发现了可以左右晃动摇摆的css3动画效果，却没有可以间歇执行的类似的动画效果。最后我想到了以前写的一个可以间歇向上无缝滚动的css3的效果，拿来一试，也不行。最后在SegmentFault上有个同行的一段代码提醒了我，于是就有了以下可以实现间歇左右晃动的css3效果。代码如下：

.cake{animation:move 3s 0s infinite;-webkit-animation:move 3s 0s infinite;transform-origin:bottom;-webkit-transform-origin:bottom;}

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

	}

}

@-webkit-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);

	}

}

原理就是首先将完成动画效果的时间设置的长一点，在文中也就是3s，然后在动画开始的几秒钟内不做任何动作，也就是在0%到65%之间不做任何动作，让它的rotate角度一直是0deg（其实在0%到65%之间时左右晃动的动画也在执行，只是晃动的角度一直是0deg，所以在这个进度内我们看不出来实际的动画效果），等动画的进度到了70%时再开始动作，那么剩余的时间就是我们能看到的左右晃动动画的执行时间了。

感谢https://segmentfault.com/q/1010000000321090这里的网友的解答给出的灵感。

以下附上源代码：

CSS3间歇左右晃动效果

巴特西

CSS3左右间歇晃动效果

最新文章

热门文章