CSS Mask 动画看起来非常紧张

Question

我希望使用 CSS mask 创建一种效果，其中 mask 图像移动非常缓慢，而 mask 形状保持静止。现在我正在用相反的动画来做，但正如你所看到的那样，它看起来非常紧张......非常感谢任何想法或建议!我也不反对非 CSS 解决方案。

HTML:

<div class="masked-section">
  <img src="https://images.unsplash.com/photo-1486903658356-4006b8abd767?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=178c7b6760bd80795174675611b673c1&auto=format&fit=crop&w=1055&q=80" class="mask"/>
</div>

CSS:

.masked-section {
  height: 800px;
  background-image: url(https://images.unsplash.com/photo-1420768255295-e871cbf6eb81?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fecaea6c506b84475edf1e4164944c38&auto=format&fit=crop&w=1050&q=80);
  background-size: cover;
  overflow:hidden;
}
.mask {
  mask-image: url(https://www.webascender.com/Portals/0/Blog/SVG-101/apple.svg);
  -webkit-mask-image: url(https://www.webascender.com/Portals/0/Blog/SVG-101/apple.svg);
  display: block;
  width: 120vw;
  height: auto;
  margin: 0 auto;
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 15%;
  -webkit-mask-size: 15%;
  mask-position: 31vw 150px, center;
  -webkit-mask-position: 31vw 150px, center;
  animation: test 100s infinite linear;
}
@keyframes test {
  25% { transform: translate(-31vw, -150px); mask-position: 62vw 300px, center; -webkit-mask-position: 62vw 300px, center }
  50% { transform: translate(0, 0); mask-position: 31vw 150px, center; -webkit-mask-position: 31vw 150px, center;}
  75% { transform: translate(-31vw, -150px); mask-position: 62vw 300px, center; -webkit-mask-position: 62vw 300px, center; }
}

密码本:

https://codepen.io/anon/pen/KoPzOM

Answer 1

在包含图像的 div 上使用 clip-path。将过渡应用于 div 内的图像。

要使用 clip-path，您需要像这样制作一个 svg:

<svg height="0" width="0">
  <defs>
    <clipPath id="svgPath">
      <path d="PATH DATA HERE"/>
    </clipPath>
  </defs>
</svg>

并将其放入文档中。

然后通过将 clip-path: url(#svgPath) 应用到 div 来链接 clip-mask。

https://codepen.io/anon/pen/VXZKRb