animation.css

作者：绝朢╭ァ发布日期:2025-04-02 浏览:127

/* animation.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;
  animation-fill-mode: forwards;
}

/* 解释说明:
- @keyframes fadeIn: 定义了一个名为 "fadeIn" 的动画，从透明度为 0 到透明度为 1。
- .fade-in-element: 将 "fadeIn" 动画应用到类为 "fade-in-element" 的元素上。
- animation-duration: 动画持续时间为 2 秒。
- animation-delay: 动画在 1 秒后开始。
- animation-fill-mode: 动画结束后保持最终状态（forwards）。
*/

上一篇：css inset

下一篇：css边框