CSS3 hover opacity ease-in-out 效果？

Question

下面有没有更好更简单的不透明度缓入缓出效果的写法？

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

Answer 1

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

例如，-moz- 前缀适用于 Firefox，您可以看到从 Firefox 16 开始不再需要它，因此您可以使用 transition 而没有 -moz- 用于 Firefox 16+ .

详细了解前缀 here。

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

示例（更少）：

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

Answer 3

不要重复转换规则。 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

CSS3 hover opacity ease-in-out 效果？

CSS3 hover opacity ease-in-out effect?

css

fade

opacity