css实现文字过度变色效果

html：

<div class="news text-center">
<a href="#">
<span>新</span>
<span>闻</span>
<span>中</span>
<span>心</span>
</a>
</div>

css：

.news {
font-size: 40px;
line-height: 50px;
margin: 100px 0;
}
.news a {
color:black;
text-decoration: none;
text-shadow: 1px 1px 0px #fff, 3px 1px 0px rgba(0, 0, 0, 0.15);
}
.news a:hover {
color: skyblue;
}
.news span {
display: inline-block;
text-transform: uppercase;
vertical-align: middle;
}
.news span:nth-of-type(1) {
transition-delay: 0.1s;
}
.news span:nth-of-type(2) {
transition-delay: 0.125s;
}
.news span:nth-of-type(3) {
transition-delay: 0.15s;
}
.news span:nth-of-type(4) {
transition-delay: 0.175s;
}