CSS 关键帧

CSS关键帧是CSS3中的一项重要功能，它允许您在CSS中使用动画效果。它的语法如下所示：

@keyframes animation-name {
  0% { /* styles */ }
  50% { /* styles */ }
  100% { /* styles */ }
}

• animation-name：动画的名称。这是必需的。
• 0%、50%、100%：关键帧的百分比。
• styles：关键帧的样式。

使用方式

我们可以通过两种方式来使用CSS关键帧。

方式一：animation属性

通过animation属性，我们可以在元素上设置一个或多个动画。

.box {
  animation: animation-name duration timing-function delay iteration-count direction fill-mode;
}

• animation-name：动画名称。
• duration：动画持续时间。
• timing-function：动画的计时函数。
• delay：动画延迟时间。
• iteration-count：动画的迭代次数。
• direction：动画的方向。
• fill-mode：动画完成后的填充模式。

例如，我们可以使用以下代码来实现一个简单的动画：

.box {
  animation: my-animation 2s ease-in-out 1s infinite alternate;
}

@keyframes my-animation {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(100%);
  }
}

方式二：@keyframes规则

我们还可以直接在CSS文件中使用@keyframes规则，然后通过JavaScript动态地为元素添加一个类来触发动画。

@keyframes my-animation {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(100%);
  }
}

const box = document.querySelector('.box');
box.classList.add('animate');

.box.animate {
  animation-name: my-animation;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

总结

CSS关键帧是一个非常有用的功能，可以帮助我们实现各种动画效果。无论是在网站、移动应用还是桌面应用中，都可以使用CSS关键帧来增强用户体验。