Question

Discord有一个很好的动画页面

硬币上下移动非常顺畅。如何将此逻辑复制到我自己的图像中？

我开始使用此代码

img {
  animation-name: move;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes move {
  0% {
    margin-top: 0px;
  }
  50% {
    margin-top: 10px;
  }
  100% {
    margin-top: 0px;
  }
}

<img src="https://gonintendo.com/system/file_uploads/uploads/000/013/369/original/bg-header-earn-coins.png">

测试代码时，图像移动不顺畅。我以为使用animation-timing-function: ease-in-out;会为我做这件事。

那里缺少什么？

Answer 1

在动画方面，移动的持续时间和距离非常重要。动画的类型也很重要。使用边距而不是CSS transform s会降低使用GPU的可能性，这通常比使用GPU更有效。

基本上，您的代码不是忠实地重现不和谐时使用的时间和动画风格。这更接近：

img {
  animation-name: move;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

@keyframes move {
  0% {
    transform: translate3d(0,-4px,0)
  }

  to {
    transform: translate3d(0,4px,0)
  }
}

<img src="https://gonintendo.com/system/file_uploads/uploads/000/013/369/original/bg-header-earn-coins.png">

使用CSS创建一个平滑的图像动画

1 个答案: