尝试使用CSS3动画，过滤器和关键帧

Question

我期待效仿这里显示这个效果得到平滑的动画循环：仅使用CSS3和/或HTML5效果http://www.yabupushelberg.com/

。如果可能的话，宁愿不使用JavaScript。

到目前为止，我已经得到了这一点：http://www.bigideaadv.com/kevin/

任何人有任何建议。

下面是当前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> 

而CSS：

#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; 
} 

Answer 1

尝试改变

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

到

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

为更好的模糊效果