CSS轉換延遲值更改

Question

謎語：

我有一個空SPAN值等待驗證「確認」文本字符串。文本字符串需要在一秒或兩秒後自動消失（無需用戶交互）。這怎麼能用純CSS完成？

由於沒有用戶啓動的觸發器如：懸停，最好是根據確切的文本字符串值設置規則嗎？似乎不靈活。你如何設定第二次或兩次延遲開始的時間？

這並不縫工作...

<span class="validationTextString" value=""></span> 

.validationTextString[value=""] 
{opacity: 1.0; 
transition: opacity 0.3s linear 2s;} 

.validationTextString[value="confirmed"] 
{opacity: 0.0;} 

感謝您的幫助。

--UPDATE--

上述規則實際上是可行的。但只有一次 - 因爲值填充後不會改變。是否有一個通用的CSS值來​​觸發變化而不是特定的值？或者觸發後重置規則的方法？再次

感謝。

Answer 1

在我看來，這對純CSS來說是不可能的。這是因爲css僅在加載時調用，所以無法檢查該值是否已被「確認」。看到這個fiddle，加載時包含「已確認」的文本框消失，但其他不會，即使您鍵入'已確認'。

另外，你需要 '$' 標誌是這樣的：

.validationTextString[value$=""] 
{opacity: 1.0; 
transition: opacity 0.3s linear 2s;} 

不幸的是，它也不起作用使用:hover或:active當這樣的：

.validationTextString:hover[value$=""] 
    {opacity: 1.0; 
    transition: opacity 0.3s linear 2s;} 

又含有「一盒證實'在裝載時會消除懸停，但輸入'已確認'的空白框仍然不會消失。