Яркость и контрастность CSS

Question

У меня есть твердый фон, который я хочу изменить яркость на петле, используя CSS в Chrome. Фон изменится в соответствии с профилем пользователя, чтобы он не всегда был одного цвета.

В качестве примера: фон может начинаться с красного, переход к розоватому цвету, а затем обратно к красному через секунду.

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

Я могу выполнить цветовой эффект, регулируя яркость и контрастность цвета, но я не знаю, как это сделать с помощью webkit.

Как изменить яркость и контрастность с помощью CSS и webkit?

Answer 1

ОБНОВЛЕНИЕ: Вы можете анимировать яркость и контрастность таким же образом, но я не уверен, как вы хотели бы достичь розового цвета.

Filters require the prefix -webkit-

@keyframes example { 
    0% { 
     filter: brightness(1); 
     filter: contrast(1); 
     -webkit-filter: brightness(1); 
     -webkit-filter: contrast(1); 
    } 
    50% { 
     filter: brightness(0.4); 
     filter: contrast(0.4); 
     -webkit-filter: brightness(0.4); 
     -webkit-filter: contrast(0.4); 
    } 
    100% { 
     filter: brightness(1); 
     filter: contrast(1); 
     -webkit-filter: brightness(1); 
     -webkit-filter: contrast(1); 
    } 
} 

Fiddle

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

div { 
    animation-name: example; 
    animation-duration: 4s; 
    animation-iteration-count: infinite; 
} 

@keyframes example { 
    from {background: red;} 
    to {background: pink;} 
} 

Fiddle

Или, если вы хотите, чтобы петли его без мигания

@keyframes example { 
    0% {background: red;} 
    50% {background: pink;} 
    100% {background: red;} 
} 

Fiddle