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

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过渡

Answer 2

sass ＆amp;少可以使您轻松。您可以使用 SASS＆amp;为此少的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 ，少

Answer 3

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

例如，-moz-前缀是Firefox，您可以看到不再需要Firefox 16，因此您可以在没有-moz-的情况下使用transition，即Firefox 16 。

在此处阅读有关前缀的更多信息。