@keyframes 动画是否需要外部库

【问题标题】：is the @keyframes animation needs external library@keyframes 动画是否需要外部库
【发布时间】：2017-02-01 07:15:25
【问题描述】：

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

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

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

【问题讨论】：

文字墙......
尝试添加一些代码，这样我们就可以弄清楚为什么它需要外部库但对于关键帧它不需要外部库
好的...我会发布它
请查看有关 Stack Overflow 的How to ask 问题以及can be asked 的问题类型以及should be avoided. 的问题类型

标签： css animation keyframe

【解决方案1】：

keyframes 工作不需要外部库。

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

.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>

。

【讨论】：