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