CSS blur only in one direction (motion blur)

Question

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

• Has to be done "live" (I can't pre-render a blurred version of the image)
• Like I said, only on the Y axis (like a motion blur, but vertical)
• Needs to animate in
• Should work in IE9+

My first thought was to use a simple CSS filter:

img {
    filter: blur(20px);
}

I can animate that by adding a transition (transition: filter 0.2s linear), but it only creates Gaussian blurs, which isn't the effect I want. The syntax doesn't support something like filter: blur(0 10px); to restrict the blur only to one axis.

Then I read that the blur filter (amongst others) is really just a shorthand for an SVG filter, which you can write manually if you want. So I created an SVG called filter.svg that specifies a 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 perfectly...but only in Firefox. Safari/Chrome don't support url() as a value for filter. Plus, I can't animate it because the value is a URL rather than a number, so transition doesn't work.

On top of all that, I don't think either of these approaches work in IE9.

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

Answer 1

If I'm understanding the question right it can be donewith JQuery.

CSS3 does have it's limits and it's very limited in interactive values.

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 it could work with javacript with a little fooling around on 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>

Answer 2

.vblur {
  filter: url(#blur);
}

<svg width="1" height="1">
    <defs>
        <filter id="blur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="0 20" />
        </filter>
    </defs>
</svg>
<div class="vblur">
<img src="https://www.google.com/chrome/static/images/chrome-logo-m100.svg">
scrollin
</div>

Embed the SVG in the same HTML page. I'm seeing online that this is allowed https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction.

I don't know if Chrome et al.'s restriction to URL filters from the same page is documented anywhere though.