Fade in einer Eingabe Textbox

ich in einem Textfeld über CSS Keyframes zu verblassen bin versucht:Fade in einer Eingabe Textbox

.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 Arbeiten auf JSFiddle, aber nicht in meinem lokalen Ansicht der Seite (Chrome 57). Das Seltsame für mich ist, dass, wenn ich das Element inspiziere, die andere Klasse von Anim verschwunden ist. Dies geschieht nicht in JSFiddle. Ich verwende w3.css, aber es funktioniert immer noch, wenn ich es als externe Ressource in JSFiddle lade.

Was vermisse ich möglicherweise?

Quelle

2017-04-09 cladelpino

Es könnte eine Menge Dinge sein, aber letztendlich nehmen wir nur Vermutungen, wenn Sie das Problem nicht für uns replizieren können. Können Sie den genauen Code kopieren und einfügen, der nicht funktioniert, oder haben Sie das hier gemacht? Eine 'Eingabe' muss nicht geschlossen werden (entfernen Sie' '), übrigens, aber das sollte nicht das Problem sein. –

Ich meine Kopieren und Einfügen alles wie es ist mit Ihrer besten Beschreibung des Kontextes, wo nötig. Und ist das CSS gerade auf der Seite so oder in einer externen Datei? –

Wenn das Ihre aktuelle Seite ist, muss Ihr CSS mindestens in einem '