@keyframes 动画是否需要外部库

Question

我是 css 动画的新手，我有兴趣了解更多关于@keyframe 动画的信息。

当我们使用@keyframe时，是否需要为此加载外部库文件？

不加外部库单独放没有得到预期的结果？

Answer 1

keyframes 工作不需要外部库。

下面是使用纯 CSS 创建 marquee 效果的示例。检查代码片段，它使用关键帧。

.marquee-parent {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 30px;
}
.marquee-child {
  display: block;
  width: 147px;
  /* width of your text div */
  height: 30px;
  /* height of your text div */
  position: absolute;
  animation: marquee 5s linear infinite;
  /* change 5s value to your desired speed */
}
.marquee-child:hover {
  animation-play-state: paused;
  cursor: pointer;
}
@keyframes marquee {
  0% {
    left: 100%;
  }
  100% {
    left: -147px
    /* same as your text width */
  }
}

<div class="marquee-parent">
  <div class="marquee-child">
    Hover on me to stop
  </div>
</div>

。

@keyframes 动画是否需要外部库

is the @keyframes animation needs external library

css

animation

keyframe