淡入输入文本框答案

【问题标题】：Fade in of an input textbox淡入输入文本框
【发布时间】：2017-04-09 11:23:03
【问题描述】：

我正在尝试通过 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)。对我来说奇怪的是，如果我检查元素，otherAnim 类就消失了。这在 JSFiddle 中不会发生。我正在使用 w3.css，但如果我将其作为外部资源加载到 JSFiddle 中，它仍然可以工作。

我可能错过了什么？

【问题讨论】：

这可能是很多事情，但如果您无法为我们复制问题，最终我们只是在猜测。您可以复制并粘贴不起作用的确切代码，还是您在这里所做的？ input 不需要关闭（删除 </input>），顺便说一句，但这不应该是问题。
我的意思是复制并粘贴所有内容，并在必要时使用您对上下文的最佳描述。 CSS 只是在这样的页面上还是在外部文件中？
如果这是您的实际页面，您的 CSS 至少需要在 <style> 标记中，并且您的页面应该有一个 doctype。 codepen.io/anon/pen/evwaww 你需要一堆其他的东西，但这些东西应该可以让它工作。
谢谢，我发现了这个错误。一个类替换脚本是罪魁祸首。无论如何，我是否可以通过用 chrome 检查脚本来替换该类？如您所见，我刚刚开始研究这项技术。
您不会看到 javascript 将其替换为 CSS 本身（就像它不会说“类替换为 javascript”或其他任何内容），您只会在检查样式时注意到t 看起来像您预期的那样，或者 class 属性没有列出您预期的类。

标签： html css css-animations keyframe

【解决方案1】：

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

【讨论】：