KangRian.com [ Font Animation - Pure CSS3 ]

by Rian .N Herdian

HTML

<h1>KangRian.com</h1>

<p>follow me on <a href="#">blogger</a>, <a href="#">wordpress</a>, <a href="#">google+</a>, <a href="#">facebook</a>, & <a href="#">twitter</a>.</p>

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

CSS

body{
  font-family: 'Open Sans', sans-serif;
  background:#313D5C;
  color:white;
  text-align:center;
}
a:hover { border-bottom:1px dotted #fff; }

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