Можно ли анимировать CSS изображение маски?

Question

Я бы хотел анимировать свойство "mask-position" для CSS изображения маски. Само изображение-маска представляет собой простой градиент, и я предполагаю, что, изменяя значение положения маски, я могу заставить фоновый объект постепенно исчезать слева направо. Однако возможно ли анимировать это свойство? Если нет, есть ли обходной путь?

.header-image figure {
    mask-image: url("http://thehermitcrab.org/wp-content/themes/the-hermit-theme/images/gradient-mask-straight.png");
    animation: clip-fade 3s;
}

@keyframes clip-fade {
  0% {mask-position: 100% 0%;}
  100% {mask-position: 0% 0%;}
}

HTML:

<div class="header-image">
<figure>
<img src="https://thehermitcrab.org/wp-content/themes/the-hermit-theme/images/footer/crab-footer-chalk-logo.png"/>
</figure>
</div>

Спасибо!

Answer 1

Не уверен, какую анимацию вы хотите выполнить, но поскольку это простой градиент, вам не нужно рассматривать изображение. Просто определите градиент, и тогда вы должны определить размер, чтобы правильно его анимировать.

Вот базовый c пример

.header-image figure {
  -webkit-mask-image: 
    linear-gradient(to right,transparent,#fff,transparent);
  -webkit-mask-size:300% 100%;  
  mask-image: 
    linear-gradient(to right,transparent,#fff,transparent);
  mask-size:300% 100%; 
  animation: clip-fade 3s infinite alternate;
}
img {
 max-width:100%;
}
@keyframes clip-fade {
  100% {
    -webkit-mask-position: right;
    mask-position: right;
  }
}

body {
   background:red;
}

<div class="header-image">
  <figure>
    <img src="https://thehermitcrab.org/wp-content/themes/the-hermit-theme/images/footer/crab-footer-chalk-logo.png" />
  </figure>
</div>

Градиент, используемый в маске, работает так же, как и в фоновом режиме, поэтому здесь приведен связанный вопрос, чтобы получить более подробную информацию о том, как работать с вычислениями: Использование процентных значений с фоновой позицией на линейном градиенте