更改动画中的占位符颜色

【问题标题】：Changing placeholder color in animation更改动画中的占位符颜色
【发布时间】：2017-09-04 02:24:33
【问题描述】：

我不知道如何在文本输入中进行动画颜色更改。

这是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

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

【问题讨论】：

标签： css

【解决方案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);
    }
}

【讨论】：