jquery - 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;

より良いぼかし効果のために