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間歇左右晃動效果