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

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

原文由 Run 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 Saurav Rastogi 发布，翻译遵循 CC BY-SA 3.0 许可协议