CSS3延迟放大显示效果

延迟放大的动画效果，视觉上挺吸睛的，用起来也不麻烦。靠的是 CSS3 的transition和transform组合，再加点animation调味，整体体验就上去了。你只要控制好scale放大倍数，再设个animation-delay，页面加载后一秒，元素优雅地放大，效果贼稳。

页面一加载，某个元素不是立马跳出来，而是缓缓放大个 1~2 秒，这种延迟放大显示，用 CSS3 就能搞定。关键就是配合transition和transform。先来段基础代码：

element {
  transition: transform 0.5s;
}

在触发事件里加个放大：

element:hover {
  transform: scale(2);
}

这么一搞，鼠标一碰，元素就平滑放大，响应也快，代码也简单。

想做“延迟”效果？可以用animation搞定。来段有 1 秒延迟的例子：

@keyframes delayedZoom {
  0% { transform: scale(1); }
  100% { transform: scale(2); }
}p>
<p>element {
  animation: delayedZoom 1s 1s forwards;
}

上面这段，animation一秒后才触发，放大过程走 1 秒，动画结束后还保持放大的状态，用户体验直接提升。

另外，transform的scale不止能放大，也能缩小，比如scale(0.8)做个回弹效果也不错。如果你想深入了解这些属性的区别和用法，下面这些文章可以翻翻：