（jQuery / CSS）模糊消失时恼人的闪烁

Question

我有一个效果，文本淡入并从模糊变为正常（两者同时）。恼人的一点是，当完全去除模糊时，句子中的单词最后会闪烁。我不知道为什么会发生这种情况或如何将其删除。

看看这里的效果：

// Creates span-elements of the words
var words = $(".sentence").text().split(" ");
$(".sentence").empty();

$.each(words, function(i, v) {
	$(".sentence").append($("<span class='effect'>").text(v));
	$(".sentence").append(' ');
});
	
// The effect
$('.sentence').children('.effect').each(function() {

	var effect = this;
	var filterVal = 'blur(0px)';
    
	setTimeout(function () {
		$(effect).css("opacity", 1);
		$(effect).css("webkitFilter", filterVal);
	}, Math.random() * 3000)
});

body {
		background-color: #000;
}
  
.sentence {
		color: #fff;
		font-size: 20px;
}

.effect {
		transition: -webkit-filter 1s linear, opacity 1s linear;
		-webkit-filter:blur(10px);
		opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sentence">
		Hi there! Do you know how to remove the glitching?
</div>

我已经搜索了很多并找到了下面的解决方案，但是，我的例子似乎没有任何区别......

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

关于解决方案的任何想法？我顺便使用Chrome。