title: CSS3 hover opacity ease-in-out effect?
body: <p>Is there any better and simpler way writing opacity ease-in-out effect below?</p>
  
  <p>CSS:</p>
  
  <pre><code> .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;
  }
  </code></pre>
  
  <p>As you can see that I repeat these lines twice which does not seem ideal:</p>
  
  <pre><code>    -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;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;a href="#" class="button-hover"&gt;HOVER ME&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/pmjw7zeu/" rel="nofollow noreferrer">jsfiddle</a></p>