CSS3 hover opacity ease-in-out effect?

Question

Is there any better and simpler way writing opacity ease-in-out effect below?

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

As you can see that I repeat these lines twice which does not seem ideal:

    -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

Don't repeat the transition rules. CSS pre-processors can help with the vendor prefixing but you really don't need to (and shouldn't) repeat the transition declarations in the :hover. Just set them once in elements's default state like so:

.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

SASS & LESS can make this easy for you. You can use SASS & LESS Mixins for this.

Example (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);
}

Example (LESS):

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

This will convert into 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;
}

More about SASS, LESS