A Pen by NeatNait.

Floating-text-shadow-animation.markdown

Floating text shadow animation

Subtle animation of the shadow beneath the text, simulating the text getting near the page.

A Pen by NeatNait on CodePen.

License.

index.html

<link href="http://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>

<h1>Audiowide</h1>

<p>made with love at <a href="#">neatnait</a></p>

style.css

body{
  font-family: 'Open Sans', sans-serif;
  background:#d94f79;
  color:white;
  text-align:center;
}

h1{
  font-family: 'Audiowide';
  font-size:5em;
  position:absolute; top:0; bottom:0; left:0; right:0;
	margin:auto; height:240px; width:70%;  
  
  -webkit-animation: floating-text 2s ease alternate infinite;
     -moz-animation: floating-text 2s ease alternate infinite;
      -ms-animation: floating-text 2s ease alternate infinite;
       -o-animation: floating-text 2s ease alternate infinite;
          animation: floating-text 2s ease alternate infinite;
}

p{
  color:rgba(255,255,255,.5);
  position:absolute;
  width:100%;
  bottom:10em;
  font-weight:300;
}

a{
  text-decoration:none;
  color:#fff;
}

@-webkit-keyframes floating-text {
  0% {  
    -webkit-transform: translateY(.1em);
    text-shadow:0 0 .5em rgba(255,255,255,.4),
      0 0 .2em rgba(0,0,0,.3),
      0 .3em .2em rgba(0,0,0,.3);

  }
  100% {
    text-shadow:0 0 .5em rgba(255,255,255,.4),
      0 0 .2em rgba(0,0,0,.3),
      0 .5em .5em rgba(0,0,0,.3);
  }
}
@-moz-keyframes floating-text {
  0% {  
    -moz-transform: translateY(.1em);
    text-shadow:0 0 .5em rgba(255,255,255,.4),
      0 0 .2em rgba(0,0,0,.3),
      0 .3em .2em rgba(0,0,0,.3);

  }
  100% {
    text-shadow:0 0 .5em rgba(255,255,255,.4),
      0 0 .2em rgba(0,0,0,.3),
      0 .5em .5em rgba(0,0,0,.3);
  }
}
@-ms-keyframes floating-text {
  0% {  
    -ms-transform: translateY(.1em);
    text-shadow:0 0 .5em rgba(255,255,255,.4),
      0 0 .2em rgba(0,0,0,.3),
      0 .3em .2em rgba(0,0,0,.3);

  }
  100% {
    text-shadow:0 0 .5em rgba(255,255,255,.4),
      0 0 .2em rgba(0,0,0,.3),
      0 .5em .5em rgba(0,0,0,.3);
  }
}
@-o-keyframes floating-text {
  0% {  
    -o-transform: translateY(.1em);
    text-shadow:0 0 .5em rgba(255,255,255,.4),
      0 0 .2em rgba(0,0,0,.3),
      0 .3em .2em rgba(0,0,0,.3);

  }
  100% {
    text-shadow:0 0 .5em rgba(255,255,255,.4),
      0 0 .2em rgba(0,0,0,.3),
      0 .5em .5em rgba(0,0,0,.3);
  }
}
@keyframes floating-text {
  0% {  
    transform: translateY(.1em);
    text-shadow:0 0 .5em rgba(255,255,255,.4),
      0 0 .2em rgba(0,0,0,.3),
      0 .3em .2em rgba(0,0,0,.3);

  }
  100% {
    text-shadow:0 0 .5em rgba(255,255,255,.4),
      0 0 .2em rgba(0,0,0,.3),
      0 .5em .5em rgba(0,0,0,.3);
  }
}