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

Question

我希望模拟此处显示的这种效果：http://www.yabupushelberg.com/

仅使用 CSS3 和/或 HTML5 效果。如果可能，宁愿不使用 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;

为了更好的模糊效果