类似心跳的banner动画

 

   本文收录一个来自alipay活动页的动画：

 

   核心代码：

 

 

@keyframes scale {
   0% {
       transform: scale(1);
   }
  1% {
       transform: scale(1.15);
  }
  2% {
       transform: scale(1);
  }
  100% {
       transform: scale(1);
  }
}


@-webkit-keyframes scale {
   0% {
       -webkit-transform: scale(1);
   }
  1% {
       -webkit-transform: scale(1.15);
  }
  2% {
       -webkit-transform: scale(1);
  }
  100% {
       -webkit-transform: scale(1);
  }
}


@-moz-keyframes scale {
   0% {
       -moz-transform: scale(1);
   }
  1% {
       -moz-transform: scale(1.15);
  }
  2% {
       -moz-transform: scale(1);
  }
  100% {
       -moz-transform: scale(1);
  }
}

 

 

.scale {
   transform: scale(1);
   -webkit-transform: scale(1);
   animation: scale 5s linear 0s infinite;
   -moz-animation: scale 5s linear 0s infinite;
   -webkit-animation: scale 5s linear 0s infinite;
}

 

 

    具体事例：

     http://jsfiddle.net/zhangyaochun/8sjs5/