淡入輸入文本框

Question

我試圖通過CSS的關鍵幀中的文本框褪色的：

.otherAnim{ 
     animation-delay:11s; 
     animation-duration:2s; 
     animation-iteration-count:1; 
     animation-fill-mode: forwards; 
    } 
@keyframes Appear{ 
    from {opacity:0;} 
    to {opacity:1;} 
} 

<div class="col" style="width:30%;height:100%"> 
    <h2>some text</h2> 
    <h2 class="otherAnim" style="animation-name:Appear;opacity:0;">some text: </h2> 
    <input type="text" id=myInput class="otherAnim inputSoFar" style="animation-name:Appear;float:left;height:45px;opacity:0;"> 
</div> 

This作品上的jsfiddle，但不是在我的本地該頁面的視圖（Chrome 57）。對我來說奇怪的是，如果我檢查這個元素，另一個Anim類已經消失了。這在JSFiddle中不會發生。我正在使用w3.css，但如果我將它作爲JSFiddle中的外部資源加載，它仍然有效。

我可能錯過了什麼？