animation css

作者：半盏流年发布日期:2025-06-22 浏览:74

/* 示例代码：使用 CSS 创建简单的动画效果 */

/* 定义关键帧 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 应用动画到元素 */
.fade-in-element {
  animation-name: fadeIn;
  animation-duration: 2s; /* 动画持续时间 */
  animation-timing-function: ease-in; /* 动画速度曲线 */
  animation-delay: 1s; /* 动画延迟时间 */
  animation-iteration-count: 1; /* 动画循环次数 */
  animation-direction: normal; /* 动画播放方向 */
}

解释说明：

@keyframes fadeIn：定义了一个名为 fadeIn 的动画，从透明度为 0（完全透明）到透明度为 1（完全不透明）。
.fade-in-element：将 fadeIn 动画应用到类名为 .fade-in-element 的元素上，并设置了动画的持续时间、速度曲线、延迟时间、循环次数和播放方向等属性。

通过这些设置，当页面加载时，具有 .fade-in-element 类的元素会在 1 秒后开始逐渐显示，并在接下来的 2 秒内逐渐变为完全不透明。

上一篇：css 字体颜色

下一篇：css多行文本溢出省略号