淡入输入文本框

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中的外部资源加载，它仍然有效。

我可能错过了什么？