盖茨比的网站“使用”部分中的动画？

Question

任何人都可以帮助gatsby在其官方网站<https://www.gatsbyjs.com/>的“徽标使用者”滑块部分中使用的动画吗，我试图检查该元素，然后找到了->

此外，我还尝试搜索他们的开源git repo <https://github.com/gatsbyjs/gatsby/tree/master/www>及其巨大的成功。

但是似乎手动操作并不太复杂，有人有什么想法可以实现该animation-1qdclt7关键帧吗？

谢谢！

Answer 1

如果您查看<ul>标签：

.css-zpz5mt {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    margin: 0;
    -webkit-animation: animation-1qdclt7 60s linear infinite;
    animation: animation-1qdclt7 60s linear infinite;
}

详细的动画（animation-1qdclt7）：

@keyframes animation-1qdclt7{
  0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0); 
  }
  100% {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
  }
}