How can I reverse the effect of this webkit transition?

Question

I want the content div to go from blurry to sharp, but i can only figure out how to do the opposite thing.

div {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);

    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;
    -ms-transition: all 2s linear;
    -o-transition: all 2s linear;
    transition: all 2s linear;


    -webkit-transition-delay: 1s;
    transition-delay: 1s;

}

Answer 1

run this example that toggles between blur and sharp by adding/removing a CSS class on the targets

var $ = jQuery;

var btn = $('button').click(function() {
  $('.target').toggleClass('blurry');
});

.target {
  transition: all 2s linear;
  transition-delay: 1s;
}

.blurry {
  filter: blur(5px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<button> Toggle blur/sharp </button>

<div class="target blurry">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fermentum pellentesque leo et porttitor. Ut luctus augue vel venenatis tincidunt. Nullam aliquam tempus cursus. Morbi quis aliquam sem. Fusce et ornare neque, a ultrices ipsum. Integer lorem sem, rhoncus non tempor non, mattis quis diam. Nunc ullamcorper tempor dolor sit amet feugiat. Etiam pretium lectus ut nisi ornare, quis euismod lacus feugiat. Donec scelerisque luctus sem at vulputate.
</div>

<div class="target">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fermentum pellentesque leo et porttitor. Ut luctus augue vel venenatis tincidunt. Nullam aliquam tempus cursus. Morbi quis aliquam sem. Fusce et ornare neque, a ultrices ipsum. Integer lorem sem, rhoncus non tempor non, mattis quis diam. Nunc ullamcorper tempor dolor sit amet feugiat. Etiam pretium lectus ut nisi ornare, quis euismod lacus feugiat. Donec scelerisque luctus sem at vulputate.
</div>