在动画中更改占位符颜色

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); 
    } 
}