CSS3 のみで display: none からフェードインさせる #CSS

CSS3 のみで display: none; の状態からからフェードインさせる方法を調べてみました。たとえば特定のクラスがついたときにフェードインさせるには下記のようにすればできました。 display の animation はできないので、下記のように 1% のキーフレームを追加して表示かつ opacity: 0; としておくのがポイントです。

<!DOCTYPE html>
<html>
<head>
  <meta charst='utf-8'>
  <title>TEST</title>
  <script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
  <style>
    .box {
      background: #000000;
      display: none;
      height: 240px;
      opacity: 0;
      width: 240px;
    }

    .visible.box {
      display: block;
      opacity: 1;
      animation-duration: 0.5s;
      animation-name: fade-in;
      -moz-animation-duration: 0.5s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-name: fade-in;
    }

    @keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }

    @-moz-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }

    @-webkit-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }
  </style>
  <script>
    $(function() {
      $('#btn').click(function() {
        $('.box').toggleClass('visible');
      });
    });
  </script>
</head>
<body>
<div class='container'>
  <div class="box"></div>
  <div>
    <button id='btn'>START</button>
  </div>
</div>
</body>
</html>

参考文献

css - Animation CSS3: display + opacity - Stack Overflow