CSS3悬停不透明度缓进缓出效果？

有没有更好更简单的方法来写下面的不透明度输入输出效果

CSS:

正如你所看到的，我重复了两遍这句话，这似乎并不理想：

    -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:

---

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

例如，

-moz-

前缀用于Firefox，您可以看到Firefox 16不再需要它，因此您可以在Firefox 16+上使用

-moz-

而不使用

-transition

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

&可以让您更轻松地使用前缀。您可以为此使用SASS&LESS mixin

示例（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);
}

示例（较少）：

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

---

有关的详细信息，

不要重复转换规则。可以帮助供应商前缀，但您确实不需要（也不应该）在

：hover中重复转换声明。只需在元素的默认状态下设置一次，如下所示：


。按钮悬停{
字体系列：arial黑色；
字体大小：100px；
颜色：#000；
-webkit转换：不透明度1s易入易出；
-moz过渡：不透明度1s缓进缓出；
-ms转换：不透明度1s缓进缓出；
-o型过渡：不透明度1s缓进缓出；
过渡：不透明度1s缓进缓出；
不透明度：1；
}
.按钮悬停：悬停{
不透明度：0.5；
}

但是我用的更少。@teelou我也集成了
LESS
mixin，请看一看。这容易多了。回答得好！只有当它们不同时，才应声明它们。