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