css - 更改动画中的占位符颜色

Question

我不知道如何在文本输入中制作动画颜色变化。

这是CSS:

@keyframes anim {
    0% {
        opacity: 0.2;
        color:blue;
    }

    70% {
        opacity: 1;
        color: red;
    }

    100% {
        opacity: 0.1;
        color: blue;
    }
}

input,
input::-webkit-input-placeholder {
    animation: anim 4s;

}

HTML:

<input type="text" placeholder="Hello" />

JsBin: https://jsbin.com/yejiwipego/1/edit?html,css,output

不透明度变化很好。 我一定是遗漏了什么？

Answer 1

我有点让它工作了，但占位符文本的不透明度似乎有点困惑。我希望这是(某种程度上)您的意思:

编辑；我让它工作得更好。检查新的 JSFiddle

更新版本:https://jsfiddle.net/oycnfxw4/

element {
  --main-text-color: rgba(0,0,255,0.8);
}

input, input::-webkit-input-placeholder {
    color: var(--main-text-color);
    -webkit-animation: anim 4s linear 1 forwards;
    animation: anim 4s linear 1 forwards;
}

@keyframes anim {
    0% {
        opacity: 0.2;
        --main-text-color: rgba(0,0,255,0.2);
    }

    70% {
        opacity: 1;
        --main-text-color: rgba(255,0,0,1);
    }

    100% {
        opacity: 0.1;
        --main-text-color: rgba(0,0,255,0.5);
    }
}