Частичная маскировка Div Css ⇐ Html

[Anonymous]

Есть элемент div с градиентом. За этим div находится анимация. С помощью маски CSS части градиента становятся прозрачными, поэтому сквозь них можно увидеть анимацию.
На самом деле элемент div содержит еще один элемент div. Проблема: второй элемент div не покрыт градиентом.
Просто посмотрите сюда, и вы увидите; Тест BURGER должен иметь градиент, но его нет.
https://jsfiddle.net/8u3gja9d/
Пример воспроизведения:

Код: Выделить всё

@keyframes moveBackground {
0% {
background-position: 0% 0%;
}
25% {
background-position: 11% 0%;
}
}

.container {
display: flex;
position: relative;
width: 100%;
height: 50px;
background-image: url(assets/texture.jpg);
background-size: cover;
background-position: center;
animation: moveBackground 5s linear infinite;
}

.gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 1), rgb(55, 216, 15));
mask: url(#mask);
/* Apply the mask here */
-webkit-mask: url(#mask);
/* For webkit browsers */
}












test






BURGER

Также достаточно будет анимировать только фон под текстом.

Подробнее здесь: https://stackoverflow.com/questions/798 ... ss-masking