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