CSS3 keyframe 紅包動畫

項目專題頁須要有一個紅包的動畫，就作了一個最簡單的放大縮小的動畫效果，主要用到的就是 CSS3 的 keyframe 動畫和 transform、transition 屬性。爲了使動畫看起來更溫馨，我把動畫時長設置成4S，而實際運動的時長只有1S左右，來達到增長動畫間隔的效果。
代碼以下：

.hongbao{
    animation: hongBao 4s ease infinite;
}
@keyframes hongBao{
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);    
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  55% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  60% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  65% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }  
}
@keyframes hongBao{
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);    
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  55% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  60% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  65% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }  
}