Делаем автоматическую плавную смену цвета любого блока сайта на CSS и HTML

Чаще всего для реализации плавной смены цвета HTML блока нужно применять JavaScript. Нашел вариант реализации на чистом CSS и делюсь им с Вами:

Предположим цвет нужно менять этому HTML блоку
<div class="color-wave">
В ЭТОМ БЛОКЕ МЕНЯЕТСЯ ПЛАВНЕНЬКО ЦВЕТ
</div>

Для плавной смены цвета нужно использовать вот такие CSS стили
div.color-wave {
-webkit-animation: color 5s ease-in-out infinite;
-moz-animation: color 5s ease-in-out infinite;
-o-animation: color 5s ease-in-out infinite;
animation: color 5s ease-in-out infinite;
font-weight: bold;
color: white;
width: 300px;
height: 300px;
}
@keyframes color {
0%{background-color: #2487ca;}
10%{background-color: #2283c3;}
20%{background-color: #1f74ad;}
30%{background-color: #1b6698;}
40%{background-color: #175782;}
50%{background-color: #13496c;}
60%{background-color: #175782;}
70%{background-color: #1b6698;}
80%{background-color: #1f74ad;}
90%{background-color: #2283c3;}
100%{background-color: #2487ca;}
}
@-webkit-keyframes color {
0%{background-color: #2487ca;}
10%{background-color: #2283c3;}
20%{background-color: #1f74ad;}
30%{background-color: #1b6698;}
40%{background-color: #175782;}
50%{background-color: #13496c;}
60%{background-color: #175782;}
70%{background-color: #1b6698;}
80%{background-color: #1f74ad;}
90%{background-color: #2283c3;}
100%{background-color: #2487ca;}
}

DEMO на Jsfiddle.

В своем варианте я меняю цвет по кругу. Градаций можно делать больше или меньше. Кстати очень удобно для подбора плавной смены цвета использовать этот инструмент. Там можно сделать подборку по градиенту, “по радуге” или по другому спектру наглядно.

Делитесь статейкой в соц. сети 😉