Как сделать данную анимацию?

Question

[Brendan Castaneda]

Доброго времени суток!
Зелёный, жёлтый, красный кубики катаются с разной периодичностью.
Подскажите как сделать так что-бы серая область была прозрачной (opacity: 0;) для юзера, но когда туда заезжают верхние кубики в эту область они так-же были не видимы..
Т.е. не полностью исчезали а по мере захода за прозрачную область.

P.S. делать серую область цветом фона как-бы не вариант.

Comments

[Brendan Castaneda]

Я попробовал обыграть со свойством background-clip но так ничего и не вышло.
Разноцветные кубики стоят на z-index'ах

Ссылка на CodePen

Answer 1

[Lord_Dantes]

Что вам стоит посмотреть по вопросу на стек

Пример: https://jsfiddle.net/xmjnoxuc/

Comments

[Brendan Castaneda]

Благодарю! Я гуглил много, но так и не нашёл решение.
Спасибо, что отписались!

[Lord_Dantes]

Brendan Castaneda, пожалуйста. Смотря как гуглили, я например начал с малого, загуглил как сделать нормальный прозрачный блок и далее добавлял ключевые слова, например Перекрытие блока прозрачным блоком и нашел этот вопрос на стеке. В будущем пробуйте разделять общий вопрос на части и искать ответ по частям, так сказать)

[Brendan Castaneda]

Slava, Ну я несколько иначе задавал вопрос.
Вся сложность была в том, что-бы правильно сформулировать, подобрать слова.

[Brendan Castaneda]

Slava, Даа на ховере всё это легко реализовать )
Я вот уже биты час пытаюсь всё это на анимации сделать..
Сложно однако это, всё выходит рывками и непойми как

[Lord_Dantes]

Brendan Castaneda, если анимация юзлесс для пользователя, запишите гифку или видео и вставьте

[Brendan Castaneda]

Slava, Я сегодня всё-же запилил её в 6 утра )
Я портфолио делаю по вёрстке, поэтому решил именно анимацию сделать, вдруг будут смотреть..