如何制作这样的css动画？

Question

我想知道如何用 css 制作这种动画： https://www.maman-corp.com/solutions 当您使用 worker 滚动到图像时，图像会从 0% 宽度变为 100% 并进行过渡。

Answer 1

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
div {
  background: tomato;
  width: 100px;
  height: 100px;
  -webkit-animation: animateThis 1s ease-in;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animateThis {
  0% {
    width: 100px;
    height: 100px;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

<div></div>

你可以在图像上做同样的事情。请改用图像类名称。