逐步增加加载动画

Question

我正在尝试在加载页面时重新创建此图像。我在任何地方都找不到教程或许多示例。

在这里您可以在图像上看到示例动画：https://dribbble.com/shots/5275648-Beaten-Path

有人可以帮我提供动画的名称或创建动画的方法吗？

Answer 1

这可能只是CSS动画，请考虑查看此Codepen或随附的代码段。

每个图像都应具有与图像相同大小的“框架”。

然后指定一组@keyframes来描述您的预期动作。

将那些@keyframes应用于您的图像以获得预期的结果。

div#frame {
  width: 300px;
  height: 200px;
  overflow: hidden;
}
div#image {
  height: 200px;
  width: 300px;
  background-color: red;
  animation: 1s ease-out 0s 1 slideInFromBottom;
  overflow: hidden;
}

@keyframes slideInFromBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

<div id="frame">
  <div id="image">
  </div>
</div>