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

<header class="header">
  <div class="header__title">
  <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>

  <div class="example">
      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:

    <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" />
// 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;
View Compiled
Run Pen

External CSS

  1. https://codepen.io/ericwbailey/pen/vMXWgz.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.