<h1>This is a demo of the CSS Media Queries Feature</h1>

<h2>@media (prefers-reduced-motion) preference </h2>

<div class="square-box">
 <div class="square-inner-box"></div>
</div>
:root {
   --coral: coral;
   --white: #fff;
}
body {
 text-align: center;
 background: var(--coral);
 color: var(--white);
}
.square-box {
  margin: 30px auto;
  width: 75px;
  height: 75px;
  border: 10px solid var(--white);
  transform: rotate(180deg);
  
}

.square-inner-box {
  background-color: var(--white);
  height: 33px;
  animation: fill 1.7s infinite ease-in;
}

@keyframes fill {
	0% {
		height: 0px;
	}
	40% {
		height: 40px;
	}
	60% {
		height: 70px;
	}
	100% {
		height: 80px;
	}
}

@keyframes roll {
	0% {
		transform: rotate(180deg);
	}
	40% {
		transform: rotate(180deg);
	}
	60% {
		transform: rotate(360deg);
	}
	100% {
		trasform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
 .square-box {
  animation: none;
 }
 .square-inner-box {
  animation: none;
 }
}

@media (prefers-reduced-motion: no-preference) {
 .square-box {
   animation: roll 2s infinite ease-out;
 }
 .square-inner-box {
    animation: fill 1.7s infinite ease-in;
 }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.