CSS3悬停不透明度缓入效果？答案

【问题标题】：CSS3 hover opacity ease-in-out effect?CSS3悬停不透明度缓入效果？
【发布时间】：2017-04-26 08:06:11
【问题描述】：

下面有没有更好更简单的写 opacity 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

【问题讨论】：

标签： css opacity fade

【解决方案1】：

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);
}

示例（少）：

/* 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

【讨论】：

但我使用 LESS。
@teelou 我也集成了less mixin，请看一下。这要容易得多。

【解决方案2】：

不要重复转换规则。 CSS pre-processors 可以帮助使用供应商前缀，但您确实不需要（也不应该）重复 :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>

Understanding CSS3 Transitions

【讨论】：

好答案！仅当它们不同时才应声明它们。

【解决方案3】：

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

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

阅读有关前缀 here 的更多信息。

【讨论】：