JSFiddle - React, Tailwind, and code Playground

by Derek Nash

HTML

<h1>Motion Blur Effect</h1>

<p>Please use as you wish and say "hi" to me <a href="http://twitter.com/craigbuckler">@craigbuckler</a>.</p>

<p>Refer to <a href="http://www.sitepoint.com/css3-motion-blur/">SitePoint.com for more information&hellip;</a></p>

<div id="outer">
<div id="mb">Motion Blur</div>
</div>

CSS

body
{
	font-family: sans-serif;
	font-weight: normal;
	margin: 10px;
	color: #555;
	background-color: #eee;
}

#outer
{
  position: relative;
  margin: 10px;
}

#mb
{
  position: absolute;
  left: 0;
  font-size: 2em;
  font-weight: bold;
  padding: 0.2em 1em;
  color: #fff;
  background-color: #600;
  border: 0.2em solid #c00;
  border-radius: 8px;
  text-shadow: 0 0 5px rgba(255,255,255,0);
  box-shadow: 0 0 2px rgba(200,0,0,0);
  -webkit-animation: motionblur 4s ease-in-out infinite;
  animation: motionblur 4s ease-in-out infinite;
}

@-webkit-keyframes motionblur {
  0%
  {
    left: 0;
    text-shadow: 0 0 0 rgba(255,255,255,0);
    box-shadow: 0 0 0 rgba(200,0,0,0);
  }
  5%
  {
    left: 0;
    -webkit-transform-origin: 0 0;
    -webkit-transform: scaleX(0.85);
  }
  25%
  {
    text-shadow: -5px 0 5px rgba(255,255,255,1);
    box-shadow: -15px 0 10px -5px rgba(200,0,0,0.5);
    -webkit-transform: scaleX(1.1) skewX(-4deg);
  }
  50%
  {
    left: 300px;
    text-shadow: 0 0 0 rgba(255,255,255,0);
    box-shadow: 0 0 0 rgba(200,0,0,0);
    -webkit-transform: scaleX(1) skewX(0deg);
  }
  55%
  {
    left: 300px;
    -webkit-transform-origin: 100% 0;
    -webkit-transform: scaleX(0.85);
  }
  75%
  {
    text-shadow: 5px 0 5px rgba(255,255,255,1);
    box-shadow: 15px 0 10px -5px rgba(200,0,0,0.5);
    -webkit-transform: scaleX(1.1) skewX(4deg);
  }
	100%
  {
    left: 0px;
    text-shadow: 0 0 0 rgba(255,255,255,0);
    box-shadow: 0 0 0 rgba(200,0,0,0);
    -webkit-transform: scaleX(1) skewX(0deg);
  }
}

@keyframes motionblur {
  0%
  {
    left: 0;
    text-shadow: 0 0 0 rgba(255,255,255,0);
    box-shadow: 0 0 0 rgba(200,0,0,0);
  }
  5%
  {
    left: 0;
    transform-origin: 0 0;
    transform: scaleX(0.85);
  }
  25%
  {
    text-shadow: -5px 0 5px rgba(255,255,255,1);
    box-shadow: -15px 0 10px -5px rgba(200,0,0,0.5);
    transform: scaleX(1.1) skewX(-4deg);
  }
  50%
  {
    left: 300px;
    text-shadow: 0 0 0 rgba(255,255,255,0);
    box-shadow:...