Question

我正在开发一个静态网站，并在CSS中有一些动画：

*
{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;     
}

这很好，所有页面都以相同的方式设置动画除了我的一个HTML文档，其中还包含输入元素和textarea：

<form action="script/contact-form.php" method="post">
    <b>Full name:</b><br/>
    <input type="text" name="name" /><br/>

    <b>Subject:</b><br>
    <input type="text" name="subject" /><br/>

    <b>E-mail:</b><br>
    <input type="text" name="email" />
    <br/><br/>

    <b>Your comments:</b><br/>
    <textarea name="comment"></textarea>
    <br/><br/>

    <input type="submit" value="Submit" />
</form>

由于某种原因，整个页面都会被动画化（与其他页面不同，它们使用相同的样式表）。我试过禁用它：

form, input, textarea
{
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in-out;
    -ms-transition: color 0 ease-in-out;
    transition: none;   
}

但它似乎没有任何效果。这是它的样子：http://notrussian.de/stack/contact-us.html。点击没有表单的其他页面会产生不同的效果。

这开始让我疯狂，我真的希望你们能帮助我。

提前致谢。

Answer 1

出了什么问题

你说：

由于某种原因，整个页面都是动画的

使用此代码时，这是预期的行为：

* {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;     
}

CSS选择器*表示该选择器的任何CSS属性都应用于网页上的每个元素。

属性all的值transition表示可以动画处理这些元素的每个属性。

因此，CSS选择器*和CSS属性transition: all的组合意味着可以为网页上的每个HTML元素设置动画的每个属性。

解决方案1：仅动画您要制作动画的内容

你可以这样做：

/** Get rid of this code
* * {
*    -webkit-transition: all 1s ease-in-out;
*    -moz-transition: all 1s ease-in-out;
*    -o-transition: all 1s ease-in-out;
*    -ms-transition: all 1s ease-in-out;
*    transition: all 1s ease-in-out;     
* }
*/

.animate, .animate * {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;     
}

然后，在您的HTML中，将class=animate添加到您要设置动画的每个元素：

<ul class="animate">
  ...
</ul>

有许多替代实现，但这是最简单的实现之一。有关最佳方法，请参阅下面的“其他改进”。

解决方案2：禁用您不想制作动画的动画

这应该有效：

form, input, textarea {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in-out;
    -ms-transition: color 0 ease-in-out;
    transition: none;   
}

你说你试过了，但是当我转到你引用的页面时，我在代码中的任何地方都找不到它。无论如何，请确保将其置于*选择器后面。

其他改进

为了提高性能并防止出现意外行为，最好始终仅为那些属性和那些您想要设置动画的元素设置动画。

因此，如果您想为div元素的宽度和高度设置动画，您应该执行以下操作：

div {
    -moz-transition: width 2s, height 4s;
    -webkit-transition: width 2s, height 4s;
    -o-transition: width 2s, height 4s;
    -ms-transition: width 2s, height 4s;
    transition: width 2s, height 4s;
}

如果您想仅为#navigation li元素的背景设置动画，则应该执行以下操作：

#navigation li {
    -moz-transition: background 1s ease-in-out;
    -webkit-transition: background 1s ease-in-out;
    -o-transition: background 1s ease-in-out;
    -ms-transition: background 1s ease-in-out;
    transition: background 1s ease-in-out;
}

CSS中出现意外动画

1 个答案:

出了什么问题

解决方案1：仅动画您要制作动画的内容

解决方案2：禁用您不想制作动画的动画

其他改进