CSS3延迟放大动画效果

延迟放大的网页特效，真的是个挺好用的小技巧。尤其在做首屏动画或是内容过渡的时候，加上一个scale + opacity的缓动动画，既不突兀又能吸引注意力。用 CSS3 的@keyframes搞定，代码也清爽，性能表现还不错。

@keyframes动画的玩法其实灵活，核心就是把动画拆成几个时间节点。比如这个放大特效，可以让元素从scale(0.9)慢慢变成scale(1)，中间加点opacity变化，看起来就有那种‘慢慢浮现’的感觉。

@keyframes zoomInDelay {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

接下来就是给元素加上动画。用类名绑定一下，设置animation属性，记得调好animation-delay，多个元素错开来用还蛮有层次感。

.zoom-target {
  animation-name: zoomInDelay;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-fill-mode: both;
}

浏览器支持基本上问题不大，但老版本 IE 就别指望了。可以搭配Autoprefixer下前缀，或者备用方案用点jQuery.animate()来兜底，也还算靠谱。

如果你在做页面进场动画，或者想让某些卡片在滚动时更有存在感，可以试试这个特效。调下时间和透明度，细节到位的话，效果真的蛮加分的。