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

Answer 2

Это префиксы, необходимые для поддержки браузера. Вы можете увидеть here, какие версии браузеров должны иметь префикс и решить, можете ли вы их удалить в зависимости от того, какие браузеры вы хотите поддерживать.

Например, префикс -moz- предназначен для Firefox, и вы можете видеть, что из Firefox 16 он больше не нужен, поэтому вы можете использовать transition без -moz- для Firefox 16+.

Подробнее о префиксах here.

Answer 3

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