Как можно реализовать анимацию картинки?

Question

[Тю Вячеслав]

Суть анимации заключается в том, что есть карта, изначально она прозрачная, и нужно чтобы градиент постепенно окрасил всю карту, как это можно реализовать?

Answer 1

[Alfieros]

@keyframes animated {
0% { background-color: #fff0; }
50% { background-color: #ffffff7d; }
100% { background-color: #fff; }
}
И добавляешь класс animated нужному блоку.

Comments

[Тю Вячеслав]

а если речь идёт о такой картинке?

с бэкграундом не получилось, к сожалению



и окрас должен быть постепенный начиная с пика горы и спускаться вниз: возможно ли это сделать с помощью css?

[Alfieros]

Тю Вячеслав, да возможно. Поиграйтесь с backgound-color: linear-gradient. Пример

[Тю Вячеслав]

Alfieros, понял, спасибо вам большое