css - 我怎样才能扭转这个 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>