CODEWITHSUNDEEP
jqueryhtmlcsscss-transitionscss-animations
Dave Rottino
Dave Rottino

Reputation: 1047

Trying to get a smooth animation cycle using CSS3 animations, filters, and keyframes

I'm looking to emulate this effect shown here: http://www.yabupushelberg.com/

using only CSS3 and/or HTML5 effects. Would rather not use javascript if possible.

So far I've gotten this: http://www.bigideaadv.com/kevin/

Anyone have any suggestions.

Here's the current HTML markup:

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

And the 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;
}

Upvotes: 0

Views: 624

Answers (1)

Scott Selby
Scott Selby

Reputation: 9570

try changing 

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

to

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

for a better blur effect

Upvotes: 2

Related Questions