如何制作这样的CSS动画?

时间:2018-10-01 08:19:46

标签: css3 animation css-transitions css-animations

我想知道如何使用CSS制作这种动画: https://www.maman-corp.com/solutions 当您使用辅助工具滚动到图片时,图片的宽度从0%变为100%。

1 个答案:

答案 0 :(得分: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>

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