我如何扭转此WebKit过渡的效果

Question

我希望内容div从模糊变成尖锐，但我只能弄清楚如何做相反的事情。

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

运行此示例，该示例通过在目标上添加/删除CSS类在模糊和夏普之间切换

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>