在動畫中更改佔位符顏色

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