为什么这个 CSS 转换没有按预期工作？

Question

我在表单中有一个提交按钮，我正在尝试进行简单的悬停过渡。我希望它交换按钮文本的颜色和按钮的背景颜色。我现在的方式是，文本随着时间的推移成功过渡，但背景颜色仍在立即切换颜色。如何解决此问题以使背景颜色也随时间变化？我正在使用 Google Chrome，所以我只放入了 -webkit-transition。一旦我开始工作，我会为其他浏览器添加其他的。

这是我的简化代码：

<form method="post" action="processRegistration.php">

    <input class="submitbutton" type="submit" name="submit" value="Create Account" />

<form>

CSS:

#signupform
form
.submitbutton {
    margin: 0 auto;
    border-radius: 5px;
    border: solid 2px #66cc66;
    background-color: #66cc66;
    color: white;
    -webkit-transition: background-color 1s;
    -webkit-transition: color 0.5s; }
#signupform
form
.submitbutton:hover {
      background-color: white;
      color: #66cc66;
      -webkit-transition: background-color 1s;
      -webkit-transition: color 0.5s; }

http://jsfiddle.net/ewkruuk3/

Answer 1

这是因为您声明了 transition 两次。您基本上是用第二个转换覆盖第一个转换。在 CSS 中，如果有两条相同的规则，则最后一条适用。您必须在一个声明中用逗号分隔两者。

transtion: color .5s, background-color 1s;

理想情况下，您的 css 可以简化为以下内容：

.submitbutton {
    // Other rules

    background-color: #66cc66;
    color: white;

    -webkit-transition: background-color 1s, color 0.5s;
    transition: background-color 1s, color 0.5s; // Include this for browser compatability

    &:hover {
        background-color: white;
        color: #66cc66;
    }
}

您不需要在 :hover 上进行转换，因为父规则中的 transition 也适用。

为什么这个 CSS 转换没有按预期工作？

Why is this CSS transition not working as intended?

html

css

css-transitions