CSS3 Motion Blur

Motion Blur using css3 keyframe animation

HTML

<div class="motion-blur"><img src="https://pbs.twimg.com/profile_images/3660681921/6e6f2f533e3dfad085c977ed7b85d13b_400x400.png"><img></div>

CSS

.motion-blur {
    position: absolute;
    font-family: arial;
    font-size: 30px;
    text-align: center;
    margin-top: 50px;
    transform-origin: 0 0;
    animation: motion_blur 2s ease-in;
    left: 200px;
    
}

@keyframes motion_blur {
  0%
  {
    left: -100px;
    opacity: 0;
    transform: scaleX(1) skewX(-4deg);
    text-shadow:  -5px 0 5px rgba(0,0,0,1);
  }
  100%
  {
    left: 250px;
    opacity: 1;
    text-shadow: -5px 0 5px rgba(0,0,0,1);
    transform: scaleX(1.1) skewX(0deg);
  }
}