CSS 亮度和对比度动画

Question

我有一个纯色背景，我想在 Chrome 上使用 CSS 改变循环的亮度。背景将更改以匹配用户的个人资料，因此它不会总是相同的颜色。

例如：背景可以从红色开始，过渡到粉红色，然后在一秒钟后恢复为红色。

另一个例子：背景可以从蓝色开始，过渡到淡蓝色，然后在一秒钟后恢复到蓝色。

我可以通过调整颜色的亮度和对比度来实现颜色效果，但我不知道如何用 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);
    }
}

小提琴

当您可以在颜色之间进行补间时，为什么要使用亮度和对比度？

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

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

小提琴

或者，如果您想在不眨眼的情况下循环播放

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

小提琴