今天在做一个活动页面时，产品想要在页面中添加一个吸引人注意的小图片左右晃动的效果，并且该效果是间歇执行的。我一想应该挺简单的吧，二话没说就答应了，谁知在真正实现的时候才发现还是有些许困难的。于是就在网上各种找资料，找的过程中，只是发现了可以左右晃动摇摆的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这里的网友的解答给出的灵感。
以下附上源代码：