CSS 弹出特效动画：从隐藏到显现

CSS 弹出特效动画：从隐藏到显现

使用 CSS 的 animation 属性和 @keyframes 规则，您可以轻松创建各种弹出特效动画，让您的元素以流畅的动画效果出现。以下是制作一个简单弹出特效动画的示例代码：

/* 定义元素的起始位置和样式 */
.pop-up {
  opacity: 0;
  transform: scale(0.5);
}

/* 定义弹出动画 */
@keyframes pop-up {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 应用动画 */
.pop-up {
  animation-name: pop-up;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

在这个示例中，我们定义了一个名为 .pop-up 的元素，并将其初始化为 opacity 为 0 和 transform 为 scale(0.5)，即初始状态为隐藏且缩小。然后，我们定义了一个名为 pop-up 的关键帧，其中 0% 表示动画开始时的状态，100% 表示动画结束时的状态。

在 0% 状态下，我们保持初始状态：opacity 为 0 和 transform 为 scale(0.5)。在 100% 状态下，我们设置最终状态：opacity 为 1 和 transform 为 scale(1)，即完全显示且恢复正常大小。

最后，我们将 .pop-up 元素的 animation-name 设置为 pop-up，animation-duration 设置为 0.5 秒，animation-timing-function 设置为 ease-out（缓出动画效果），animation-fill-mode 设置为 forwards（动画结束后保持最终状态）。

现在，当 .pop-up 元素出现在浏览器窗口中时，它将以弹出动画的形式出现，并保持最终状态。

您可以根据需要修改关键帧中的状态、动画时间、动画函数等参数，创建各种不同的弹出特效。