类似心跳的banner动画

原创于 2013-11-04 13:26:47 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#animation #scale

css动画专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个在支付宝活动页面使用的CSS缩放动画效果。该动画通过关键帧定义了元素的缩放变化过程，实现了从原始大小到放大再恢复的过程，并且指定了动画的持续时间、计时函数和重复次数。

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