Jquery 尝试使用CSS3动画、过滤器和关键帧获得平滑的动画循环

我希望模拟这里显示的效果：

仅使用CSS3和/或HTML5效果。如果可能的话，我宁愿不使用javascript

到目前为止，我已经了解到：

有什么建议吗

以下是当前的HTML标记：

<div id="logo_fadein">
    <span>K</span>
    <span>e</span>
    <span>v</span>
    <span>i</span>
    <span>n</span>
    &nbsp;
    <span>O</span>
    <span>'</span>
    <span>S</span>
    <span>u</span>
    <span>l</span>
    <span>l</span>
    <span>i</span>
    <span>v</span>
    <span>a</span>
    <span>n</span>
</div>

#logo_fadein {
    margin: 25% auto 0 auto;
    padding: 0;
    width: 320px;
    color: #000000;
    background: transparent;
    font-family: "helvetica neue ultra light", "helvetica neue";
    font-size: 1.65em;
    font-weight: 100;
    text-align: center;
    text-transform: uppercase;
}

@-moz-keyframes blackblur {
  from { text-shadow: 0px 0px 15em white; color: transparent; }
  to   { text-shadow: 0px 0px 15em white; color: white; }
}

@-ms-keyframes blackblur {
  from { text-shadow: 0px 0px 15em white; color: transparent; }
  to   { text-shadow: 0px 0px 15em white; color: white; }
}

@-moz-keyframes blackblur {
  from { text-shadow: 0px 0px 15em white; color: transparent; }
  to   { text-shadow: 0px 0px 15em white; color: white; }
}

@-o-keyframes blackblur {
  from { text-shadow: 0px 0px 15em white; color: transparent; }
  to   { text-shadow: 0px 0px 15em white; color: white; }
}

@-webkit-keyframes blackblur {
  from { text-shadow: 0px 0px 15em white; -webkit-filter: blur(2px); color: transparent; }
  to   { text-shadow: 0px 0px 15em white; -webkit-filter: blur(0px); color: white; }
}

@keyframes blackblur {
  from { text-shadow: 0px 0px 15em white; -webkit-filter: blur(2px); color: transparent; }
  to   { text-shadow: 0px 0px 15em white; -webkit-filter: blur(0px); color: white; }
}

#logo_fadein span:nth-of-type(1)  { 
    -moz-animation: blackblur 2s ease-in 1.5s 2 alternate;
    -ms-animation: blackblur 2s ease-in 1.5s 2 alternate;
    -o-animation: blackblur 2s ease-in 1.5s 2 alternate;
    -webkit-animation: blackblur 2s ease-in 1.5s 2 alternate;
    animation: blackblur 2s ease-in 1.5s 2 alternate;
}

#logo_fadein span:nth-of-type(2)  { 

    -moz-animation: blackblur 2s ease-in 1.9s 2 alternate;
    -ms-animation: blackblur 2s ease-in 1.9s 2 alternate;
    -o-animation: blackblur 2s ease-in 1.9s 2 alternate;
    -webkit-animation: blackblur 2s ease-in 1.9s 2 alternate;
    animation: blackblur 2s ease-in 1.9s 2 alternate;
}

#logo_fadein span:nth-of-type(3)  {

    -moz-animation: blackblur 2s ease-in 1.75s 2 alternate;
    -ms-animation: blackblur 2s ease-in 1.75s 2 alternate;
    -o-animation: blackblur 2s ease-in 1.75s 2 alternate;
    -webkit-animation: blackblur 2s ease-in 1.75s 2 alternate;
    animation: blackblur 2s ease-in 1.75s 2 alternate;
}

#logo_fadein span:nth-of-type(4)  {

    -moz-animation: blackblur 2s ease-in 1.5s 2 alternate;
    -ms-animation: blackblur 2s ease-in 1.5s 2 alternate;
    -o-animation: blackblur 2s ease-in 1.5s 2 alternate;
    -webkit-animation: blackblur 2s ease-in 1.5s 2 alternate;
    animation: blackblur 2s ease-in 1.5s 2 alternate;
}

#logo_fadein span:nth-of-type(5)  {

    -moz-animation: blackblur 2s ease-in 2s 2 alternate;
    -ms-animation: blackblur 2s ease-in 2s 2 alternate;
    -o-animation: blackblur 2s ease-in 2s 2 alternate;
    -webkit-animation: blackblur 2s ease-in 2s 2 alternate;
    animation: blackblur 2s ease-in 2s 2 alternate;
}

#logo_fadein span:nth-of-type(6)  {

    -moz-animation: blackblur 2s ease-in 1.45s 2 alternate;
    -ms-animation: blackblur 2s ease-in 1.45s 2 alternate;
    -o-animation: blackblur 2s ease-in 1.45s 2 alternate;
    -webkit-animation: blackblur 2s ease-in 1.45s 2 alternate;
    animation: blackblur 2s ease-in 1.45s 2 alternate;
}

#logo_fadein span:nth-of-type(7)  { 

    -moz-animation: blackblur 2s ease-in 1.65s 2 alternate;
    -ms-animation: blackblur 2s ease-in 1.65s 2 alternate;
    -o-animation: blackblur 2s ease-in 1.65s 2 alternate;
    -webkit-animation: blackblur 2s ease-in 1.65s 2 alternate;
    animation: blackblur 2s ease-in 1.65s 2 alternate;
}

#logo_fadein span:nth-of-type(8)  {

    -webkit-animation: blackblur 2s ease-in 1.8s 2 alternate;
}

#logo_fadein span:nth-of-type(9)  {

    -moz-animation: blackblur 2s ease-in 1.45s 2 alternate;
    -ms-animation: blackblur 2s ease-in 1.45s 2 alternate;
    -o-animation: blackblur 2s ease-in 1.45s 2 alternate;
    -webkit-animation: blackblur 2s ease-in 1.45s 2 alternate;
    animation: blackblur 2s ease-in 1.45s 2 alternate;
}

#logo_fadein span:nth-of-type(10) {

    -moz-animation: blackblur 2s ease-in 1.9s 2 alternate;
    -ms-animation: blackblur 2s ease-in 1.9s 2 alternate;
    -o-animation: blackblur 2s ease-in 1.9s 2 alternate;
    -webkit-animation: blackblur 2s ease-in 1.9s 2 alternate;
    animation: blackblur 2s ease-in 1.9s 2 alternate;
}

#logo_fadein span:nth-of-type(11) {

    -moz-animation: blackblur 2s ease-in 2s 2 alternate;
    -ms-animation: blackblur 2s ease-in 2s 2 alternate;
    -o-animation: blackblur 2s ease-in 2s 2 alternate;
    -webkit-animation: blackblur 2s ease-in 2s 2 alternate;
    animation: blackblur 2s ease-in 2s 2 alternate;
}

#logo_fadein span:nth-of-type(12) {

    -moz-animation: blackblur 2s ease-in 1.6s 2 alternate;
    -ms-animation: blackblur 2s ease-in 1.6s 2 alternate;
    -o-animation: blackblur 2s ease-in 1.6s 2 alternate;
    -webkit-animation: blackblur 2s ease-in 1.6s 2 alternate;
    animation: blackblur 2s ease-in 1.6s 2 alternate;
}

#logo_fadein span:nth-of-type(13) { 

    -moz-animation: blackblur 2s ease-in 1.7s 2 alternate;
    -ms-animation: blackblur 2s ease-in 1.7s 2 alternate;
    -o-animation: blackblur 2s ease-in 1.7s 2 alternate;
    -webkit-animation: blackblur 2s ease-in 1.7s 2 alternate;
    animation: blackblur 2s ease-in 1.7s 2 alternate;
}

#logo_fadein span:nth-of-type(14) { 

    -moz-animation: blackblur 2s ease-in 1.8s 2 alternate;
    -ms-animation: blackblur 2s ease-in 1.8s 2 alternate;
    -o-animation: blackblur 2s ease-in 1.8s 2 alternate;
    -webkit-animation: blackblur 2s ease-in 1.8s 2 alternate;
    animation: blackblur 2s ease-in 1.8s 2 alternate;
}

#logo_fadein span:nth-of-type(15) {

    -moz-animation: blackblur 2s ease-in 1.75s 2 alternate;
    -ms-animation: blackblur 2s ease-in 1.75s 2 alternate;
    -o-animation: blackblur 2s ease-in 1.75s 2 alternate;
    -webkit-animation: blackblur 2s ease-in 1.75s 2 alternate;
    animation: blackblur 2s ease-in 1.75s 2 alternate;
}

试着改变

  text-shadow: 0px 0px 15em white;

到

为了获得更好的模糊效果

  text-shadow: 0px 0px 5px #000;