如何制作这样的CSS动画？

Question

我想知道如何使用CSS制作这种动画： https://www.maman-corp.com/solutions 当您使用辅助工具滚动到图片时，图片的宽度从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>

您可以在图像上执行相同的操作。改用图像类名称。