<div class="reduced-motion-notification">
  <p>It looks like you have reduced motion experience enabled. Turn it off to view this demo.</p>
  <p><a href="https://developer.paciellogroup.com/blog/2019/05/short-note-on-prefers-reduced-motion-and-puzzled-windows-users/">Learn more about how to do this</a></p>
</div>

<header class="header">
  <div class="header__title">
    <h1>
      <code>opacity()</code>
    </h1>
  </div>
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" rel="external noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=css-filters">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example we are animating <code>opacity()</code> to make <a rel="external noopener" href="https://en.m.wikipedia.org/wiki/TARDIS">Dr. Who's TARDIS</a> materialize:
    </p>

    <div class="example__demo example__opacity">
      <img alt="Dr. Who's TARDIS." src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/tardis.png" />
    </div>
  </div>
</main>

// Demo
@keyframes materialize {
  0% {
    filter: opacity(0);
  }

  70% {
    filter: opacity(1);
  }

  100% {
    filter: opacity(0);
  }
}


// Pen Setup
.example__opacity {
  display: flex;
  height: 60vh;
  justify-content: center;
  
  img { 
    animation-duration: 3000ms;
    animation-iteration-count: infinite;
    animation-name: materialize;
    width: 45%;
    
    @media screen and (prefers-reduced-motion: reduce) {
      display: none;
    }
  }
}