Blur text

by dreamdealer

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices risus quis ipsum accumsan facilisis lobortis ante varius. Duis eu lacus ac lacus auctor fringilla. Donec pharetra enim quis elit tempor ut pulvinar lectus molestie. Etiam ligula eros, tempor ut porttitor et, pellentesque eget augue. Fusce in ante neque, vel semper quam. Integer vestibulum eleifend eros. Nam vehicula nibh vel massa ornare volutpat. </p>

CSS

body {
    padding: 50px;   
}
p {
    display: block;
    width: 400px;
}
p:hover {
    -moz-animation-name: motionblur;
    -moz-animation-duration: 1s;
     -moz-animation-direction: alternate;
     -moz-animation-timing-function: ease-in-out;
    color: rgba(0,0,0,0);
}
@-moz-keyframes motionblur {
     0% {
        color: rgba(0,0,0,0);
        text-shadow: 0px 0px 0px rgba(0,0,0,1)
     }
     100% {
        color: rgba(0,0,0,0);
        text-shadow: 0px 0px 60px rgba(0,0,0,0);
     }
}