类似心跳的banner动画

梦远青城 2013-11-04

   本文收录一个来自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/

相关推荐