CSS3悬停透明度ease-in-out效果？

Question

有没有更好、更简单的方法来编写下面的透明度 ease-in-out 效果？

CSS:

 .button-hover {
    font-family: arial black;
    font-size: 100px;
    color: #000;

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    opacity: 1;
}

.button-hover:hover {
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    opacity: 0.5;
}

你可以看到，我重复了这些行两次，这似乎并不理想:

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;

HTML:

<div class="container">
    <a href="#" class="button-hover">HOVER ME</a>
</div>

jsfiddle

- Run

Answer 1

不要重复过渡规则。 CSS 预处理器 可以帮助添加厂商前缀，但你真的不需要（也不应该）在 :hover 中重复过渡声明。只需在元素的默认状态下设置一次，如下所示：

.button-hover {
    font-family: arial black;
    font-size: 100px;
    color: #000;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    opacity: 1;
}

.button-hover:hover {
    opacity: 0.5;
}

<div class="container">
    <a href="#" class="button-hover">HOVER ME</a>
</div>

了解CSS3过渡效果

- Moob

---

好的答案！如果它们不同，您应该只声明它们。 - vals

Answer 2

SASS 和 LESS 可以让这变得更加容易。您可以使用SASS & LESS Mixins 来实现。

示例（SASS）：

/* Create a Mixin (SASS) */
@mixin transition($property, $time, $method) {
  -webkit-transition: $property $time $method;
  -moz-transition: $property $time $method;
  -ms-transition: $property $time $method;
  -o-transition: $property $time $method;
  transition: $property $time $method;
}

/* Include this Mixin (SASS) */
.button-hover:hover {
  @include transition(opacity, 1s, ease-in-out);
}

例子（LESS）：

/* Create a Mixin (LESS) */
.transition(@property, @time, @method) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -ms-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}

/* Include this Mixin (LESS) */
.button-hover:hover {
  .transition(opacity, 1s, ease-in-out);
}

这将转换为CSS:

.button-hover:hover {
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

更多关于SASS，LESS的内容

- Saurav Rastogi

---

但我使用LESS。 - Run

@teelou，我已经整合了less混入，可以看一下。这样会容易得多。 - Saurav Rastogi

Answer 3

这些是浏览器支持所需的前缀。 您可以在此处查看需要前缀的浏览器版本，并根据您想要支持的浏览器决定是否可以删除它们。

例如，-moz-前缀用于Firefox，您可以从Firefox 16中看到它不再需要，因此您可以在Firefox 16+中使用不带-moz-的transition。

了解更多关于前缀的信息，请参阅此处。

- Eran Shabi