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）。对我来说奇怪的是，如果我检查元素，那么另一个类已经消失了。这在JSFiddle中不会发生。我使用w3.css，但如果我在JSFiddle中将其作为外部资源加载，它仍然有效。

我可能错过了什么？

Answer 1

不要将animation-name属性设置为内联样式。您必须将它放在样式标记或链接的css文件中。

淡入输入文本框

1 个答案: