CSS3の「@keyframes」などを使い、タイトルやロゴ風のテキストが一文字ずつ下から浮かび上がって画面に張り付いていくアニメーションの実装です。以前はjavascriptなどの手を借りなければできなかった動きが、CSS3では可能になりました。ただ、テキストを個別にひとつずつ動かしているため、CSSの記述はやや長めになります。

また、斜めに色分けされたテキストの輝くような効果がきれいです。次は、やや古いMacのChrome v46でサンプルページを表示したときの画像です。

実装：

HTMLソース

<div>
	<span data-text="M"></span>
	<span data-text="A"></span>
	<span data-text="G"></span>
	<span data-text="N"></span>
	<span data-text="E"></span>
	<span data-text="T"></span>
	<span data-text="Y"></span>
	<span data-text="P"></span>
	<span data-text="E"></span>
</div>

CSSソース

@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);
@-webkit-keyframes flip-top {
	from {
 	-webkit-transform: rotate(50deg) translateY(120vh);
	transform: rotate(50deg) translateY(120vh);
	}
}
@keyframes flip-top {
  from {
    -webkit-transform: rotate(50deg) translateY(120vh);
            transform: rotate(50deg) translateY(120vh);
  }
}
@-webkit-keyframes flip-bottom {
  from {
    -webkit-transform: rotate(-50deg) translateY(120vh);
            transform: rotate(-50deg) translateY(120vh);
  }
}
@keyframes flip-bottom {
  from {
    -webkit-transform: rotate(-50deg) translateY(120vh);
            transform: rotate(-50deg) translateY(120vh);
  }
}
body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  background: #111;
  -webkit-animation: glow 8s both;
  animation: glow 8s both;
}

span {
  font: 900 10vw Raleway;/*900 15vw Raleway;*/
  position: relative;
  display: inline-block;
  -webkit-perspective: 500px;
          perspective: 500px;
}
span:nth-child(odd):before {
  -webkit-animation-name: flip-top;
          animation-name: flip-top;
}
span:nth-child(odd):after {
  -webkit-animation-name: flip-bottom;
          animation-name: flip-bottom;
}
span:nth-child(even):before {
  -webkit-animation-name: flip-bottom;
          animation-name: flip-bottom;
}
span:nth-child(even):after {
  -webkit-animation-name: flip-top;
          animation-name: flip-top;
}
span:nth-child(1n + 0):before {
  color: #4EC0B6;
}
span:nth-child(1n + 0):after {
  color: #4ea4c0;
}
span:nth-child(2n + 1):before {
  color: #3967CB;
}
span:nth-child(2n + 1):after {
  color: #3c39cb;
}
span:nth-child(3n + 2):before {
  color: #FDCD2F;
}
span:nth-child(3n + 2):after {
  color: #e8fd2f;
}
span:nth-child(4n + 3):before {
  color: #E23942;
}
span:nth-child(4n + 3):after {
  color: #e26839;
}
span:nth-child(1):before {
  -webkit-animation-delay: 0.88706s;
          animation-delay: 0.88706s;
}
span:nth-child(1):after {
  -webkit-animation-delay: 1.32717s;
          animation-delay: 1.32717s;
}
span:nth-child(2):before {
  -webkit-animation-delay: 1.76318s;
          animation-delay: 1.76318s;
}
span:nth-child(2):after {
  -webkit-animation-delay: 2.19375s;
          animation-delay: 2.19375s;
}
span:nth-child(3):before {
  -webkit-animation-delay: 2.61756s;
          animation-delay: 2.61756s;
}
span:nth-child(3):after {
  -webkit-animation-delay: 3.03328s;
          animation-delay: 3.03328s;
}
span:nth-child(4):before {
  -webkit-animation-delay: 3.43965s;
          animation-delay: 3.43965s;
}
span:nth-child(4):after {
  -webkit-animation-delay: 3.8354s;
          animation-delay: 3.8354s;
}
span:nth-child(5):before {
  -webkit-animation-delay: 4.21932s;
          animation-delay: 4.21932s;
}
span:nth-child(5):after {
  -webkit-animation-delay: 4.59022s;
          animation-delay: 4.59022s;
}
span:nth-child(6):before {
  -webkit-animation-delay: 4.94696s;
          animation-delay: 4.94696s;
}
span:nth-child(6):after {
  -webkit-animation-delay: 5.28843s;
          animation-delay: 5.28843s;
}
span:nth-child(7):before {
  -webkit-animation-delay: 5.61358s;
          animation-delay: 5.61358s;
}
span:nth-child(7):after {
  -webkit-animation-delay: 5.92141s;
          animation-delay: 5.92141s;
}
span:nth-child(8):before {
  -webkit-animation-delay: 6.21098s;
          animation-delay: 6.21098s;
}
span:nth-child(8):after {
  -webkit-animation-delay: 6.48137s;
          animation-delay: 6.48137s;
}
span:nth-child(9):before {
  -webkit-animation-delay: 6.73177s;
          animation-delay: 6.73177s;
}
span:nth-child(9):after {
  -webkit-animation-delay: 6.96139s;
          animation-delay: 6.96139s;
}
span:before, span:after {
  display: block;
  content: attr(data-text);
  -webkit-animation: 0.88889s ease-out both;
          animation: 0.88889s ease-out both;
  -webkit-animation-name: inherit;
          animation-name: inherit;
  text-shadow: 0 0 1em;
}
span:before {
  -webkit-clip-path: polygon(0 0 100% 0, 100% 100%);
  clip-path: polygon(0 0 100% 0, 100% 100%);
  position: absolute;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  color: #4EC0B6;
}
span:after {
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  color: #3967CB;
}