CSS only blurred in one direction (motion blur)

Question

I need to dynamically blur the image on my page, but only along one axis ( Y in particular). So here are my requirements:

• It should be done live (I can’t pre-paint the blurry version of the image)
• As I said, only on the Y axis (for example, motion blur, but vertical)
• Need to animate
• Should work in IE9 +

My first thought was to use a simple CSS filter:

 img { filter: blur(20px); } 

I can animate this by adding a transition ( transition: filter 0.2s linear ), but it only creates Gaussian blurring, which I don't want. The syntax does not support something like filter: blur(0 10px); to limit the blur to only one axis.

Then I read that the blur filter (among others) is actually just a shorthand for the SVG filter, which you can write manually if you want. So I created an SVG called filter.svg that indicates 20px blur only along the Y axis ( 0 20 ):

 <?xml version="1.0" standalone="no"?> <svg width="1" height="1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="0 20" /> </filter> </defs> </svg> 

And applied it like this:

 img { filter: url("filter.svg#blur"); } 

And that works fine ... but only in Firefox. Safari / Chrome does not support url() as the value for filter . Also, I cannot animate it because the value is a URL, not a number, so transition does not work.

Among other things, I do not think that any of these approaches works in IE9 .

So: is there a way to do what I'm trying to do? I looked at using canvas as an alternative, but can't find any examples of blur that goes in only one direction.

Answer 1

If I understand the question correctly, this may be due to jQuery.

CSS3 has its limitations and is very limited in interactive meanings.

Jquery also adds cross-platform stability.

JQuery

 $(document).ready(function() { var $img = $('.image') $img.hide(); $img.show().animate({ opacity: 100, paddingTop: '+=80' }, 500) }); 

Here is an example of how this might work with javacript with a slight change in opacity.

 function myMove() { var elem = document.getElementById("animate"); var pos = 0; var id = setInterval(frame, 5); function frame() { if (pos == 150) { clearInterval(id); } else { pos++; elem.style.left = pos + 'px'; } } } 

 #container { width: 400px; height: 400px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; } 

 <p> <button onclick="myMove()">Click Me</button> </p> <div id="container"> <div id="animate"></div> </div>