Анимированная типографика на CSS3

Каждая буква создана с помощью нескольких элементов HTML и каждая часть буквы будет иметь собственное объявление CSS-анимации, но с разными задержками. Это отзывчивая типографика. Лучше всего она будет смотреться на экранах с разрешением 1920px или 1000px и ниже. Типографика будет трансформироваться в том случае, если ширина экрана будет 1280px и 1024px.

HTML:

<!--[if lte IE 10]>
<style type='text/css'>
html body #typo-wrap {
  margin:0 auto !important;
  padding:10px;
}
</style>
<![endif]-->
<section id="typo-wrap">
	<h1><!--
	--><span class="char char-w collapsed">W<!--
		--><span class="part-1 bevel bevel-left-bottom"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4 bevel bevel-bottom-middle"></span><!--
	--></span><!--
	--><span class="char char-h collapsed">H<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
	--></span><!--
	--><span class="char char-i collapsed"><span>I</span></span><!--
		--><span class="char char-t collapsed">T<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
	--></span><!--
	--><span class="char char-e collapsed">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-s">S<!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-left-bottom bevel-right-top"></span><!--
		--><span class="part-3 bevel bevel-right-bottom"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-p">P<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-bottom"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-a">A<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3 bevel bevel-left-top"></span><!--
		--><span class="part-4 bevel bevel-right-top"></span><!--
	--></span><!--
	--><span class="char char-c">C<!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-left-bottom"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-e">E <!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-small char-i clear">I</span><!--
	--><span class="char char-small char-s">S <!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-right-bottom"></span><!--
		--><span class="part-3 bevel bevel-left-bottom bevel-right-top"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-b clear">B<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-middle"></span><!--
		--><span class="part-3 bevel bevel-right-bottom"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-r">R<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-middle"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-e">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-a">A<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3 bevel bevel-left-top"></span><!--
		--><span class="part-4 bevel bevel-right-top"></span><!--
	--></span><!--
	--><span class="char char-t">T<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
	--></span><!--
	--><span class="char char-h">H,<br><!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
	--></span><!--
	--><span class="char char-w collapsed clear">W<!--
		--><span class="part-1 bevel bevel-left-bottom"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4 bevel bevel-bottom-middle"></span><!--
	--></span><!--
	--><span class="char char-h collapsed">H<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
	--></span><!--
	--><span class="char char-i collapsed"><span>I</span></span><!--
	--><span class="char char-t collapsed">T<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
	--></span><!--
	--><span class="char char-e collapsed">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char same char-s">S<!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-left-bottom bevel-right-top"></span><!--
		--><span class="part-3 bevel bevel-right-bottom"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char same char-p">P<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-bottom"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char same char-a">A<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3 bevel bevel-left-top"></span><!--
		--><span class="part-4 bevel bevel-right-top"></span><!--
	--></span><!--
	--><span class="char same char-c">C<!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-left-bottom"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char same char-e">E <!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-small char-i clear">I</span><!--
	--><span class="char char-small char-s">S <!--
		--><span class="part-1 bevel bevel-left-top"></span><!--
		--><span class="part-2 bevel bevel-right-bottom"></span><!--
		--><span class="part-3 bevel bevel-left-bottom bevel-right-top"></span><!--
		--><span class="part-4"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-f clear">F<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
	--></span><!--
	--><span class="char char-r">R<!--
		--><span class="part-1 bevel bevel-right-top"></span><!--
		--><span class="part-2 bevel bevel-right-middle"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-e">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-e">E<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="char char-d">D<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3"></span><!--
		--><span class="part-4 bevel bevel-right-top bevel bevel-right-bottom"></span><!--
		--><span class="part-5"></span><!--
	--></span><!--
	--><span class="char char-o">O<!--
		--><span class="part-1"></span><!--
		--><span class="part-2"></span><!--
		--><span class="part-3 bevel bevel-left-top bevel-left-bottom"></span><!--
		--><span class="part-4 bevel bevel-right-top bevel-right-bottom"></span><!--
	--></span><!--
	--><span class="char char-m">M<!--
		--><span class="part-1"></span><!--
		--><span class="part-2 bevel bevel-top-middle"></span><!--
		--><span class="part-3 bevel bevel-right-top"></span><!--
		--><span class="part-4"></span><!--
	--></span><!--
	--><span class="blink">.</span>
	</h1>
	<div class="clear"></div>
</section>

CSS:

/*
CSS3 Animated Typography by Taufik Nurrohman
http://latitudu.blogspot.com/2012/10/space.html
*/

* {margin:0;padding:0}

body {
  background-color:#222;
  font:normal normal 12px/1.4 Arial,Sans-Serif;
  color:#555;
  text-shadow:0 1px 0 #0F0F0F;
  overflow:auto;
  overflow-x:hidden;
  overflow-y:auto;
}

#typo-wrap {
  display:block;
  margin:0 auto;
  padding:25px 25px;
  text-align:center;
  overflow:hidden;
  transition:all 1s ease-out;
}

.clear {clear:both}

.char,
.blink {
  display:block;
  margin:0 15px 20px 0;
  float:left;
  width:150px;
  height:200px;
  position:relative;
  font:normal normal 0/0 Serif;
  text-shadow:none;
  color:transparent;
}

.char span {
  display:block;
  position:absolute;
  background-color:white;
}

.char br {display:none}

.collapsed {overflow:hidden}

.blink {
  width:5px;
  height:220px;
  margin-top:-10px;
  background-color:#666;
}

.char-w.collapsed {width:200px}

.char-w.collapsed span {
  top:0;
  bottom:0;
  width:40px;
}

.char-w.collapsed .part-1 {left:0}
.char-w.collapsed .part-2 {left:80px}
.char-w.collapsed .part-3 {right:0}

.char-w.collapsed .part-4 {
  top:auto;
  right:0;
  bottom:0;
  left:0;
  width:auto;
  height:40px;
}

.char-i.collapsed {width:40px}

.char-i.collapsed span {
  top:0;
  right:0;
  bottom:0;
  left:0;
}

.char-s span {
  right:0;
  left:0;
  height:40px;
}

.char-s .part-1 {top:0}
.char-s .part-2 {top:80px}
.char-s .part-3 {bottom:0}

.char-s .part-4,
.char-s .part-5 {
  top:0;
  left:0;
  right:auto;
  left:auto;
  width:40px;
  height:120px;
}

.char-s .part-5 {
  top:auto;
  bottom:0;
  left:auto;
  right:0;
}

.char-p span {
  right:0;
  left:0;
  height:40px;
}

.char-p .part-1 {top:0}
.char-p .part-2 {top:80px}

.char-p .part-3,
.char-p .part-4 {
  top:0;
  right:auto;
  bottom:0;
  left:0;
  width:40px;
  height:auto;
}

.char-p .part-4 {
  bottom:auto;
  left:auto;
  right:0;
  height:120px;
}

.char-a span,
.char-h span {
  right:0;
  left:0;
  height:40px;
}

.char-a .part-1 {top:0}

.char-a .part-2,
.char-h .part-1 {top:80px}

.char-a .part-3,
.char-a .part-4,
.char-h .part-2,
.char-h .part-3 {
  top:0;
  right:auto;
  bottom:0;
  left:0;
  width:40px;
  height:auto;
}

.char-a .part-4,
.char-h .part-3 {
  left:auto;
  right:0;
}

.char-c .part-1,
.char-c .part-2,
.char-c .part-4 {
  top:0;
  right:0;
  left:0;
  height:40px;
}

.char-c .part-2 {
  top:auto;
  bottom:0;
}

.char-c .part-3,
.char-c .part-4 {
  top:0;
  right:auto;
  bottom:0;
  left:0;
  width:40px;
  height:auto;
}

.char-c .part-4 {
  right:0;
  bottom:auto;
  left:auto;
  height:80px;
}

.char-e span,
.char-b span {
  right:0;
  left:0;
  height:40px;
}

.char-e .part-1,
.char-b .part-1 {top:0}

.char-e .part-2,
.char-b .part-2 {top:80px}

.char-e .part-3,
.char-b .part-3 {bottom:0}

.char-e .part-4,
.char-b .part-4,
.char-b .part-5 {
  top:0;
  right:auto;
  bottom:0;
  width:40px;
  height:auto;
}

.char-b .part-5 {
  right:0;
  left:auto;
}

.char-f span,
.char-r span {
  right:0;
  left:0;
  height:40px;
}

.char-f .part-1,
.char-r .part-1 {top:0}

.char-f .part-2,
.char-r .part-2 {top:80px}

.char-f .part-3,
.char-r .part-3,
.char-r .part-4 {
  top:0;
  right:auto;
  bottom:0;
  left:0;
  width:40px;
  height:auto;
}

.char-r .part-4 {
  right:0;
  left:auto;
}

.char-d span,
.char-o span {
  right:0;
  left:0;
  height:40px;
}

.char-d .part-1,
.char-o .part-1 {top:0}

.char-d .part-2,
.char-o .part-2 {bottom:0}

.char-d .part-3,
.char-d .part-4,
.char-o .part-3,
.char-o .part-4 {
  top:0;
  right:auto;
  bottom:0;
  left:0;
  width:40px;
  height:auto;
}

.char-d .part-4,
.char-o .part-4 {
  right:0;
  left:auto;
}

.char-m {width:200px}

.char-m span {
  top:0;
  bottom:0;
  width:40px;
}

.char-m .part-1 {left:0}
.char-m .part-2 {left:80px}
.char-m .part-3 {right:0}

.char-m .part-4 {
  right:0;
  bottom:auto;
  left:0;
  height:40px;
  width:auto;
}

.char-t span {
  top:0;
  right:0;
  left:0;
  height:40px;
}

.char-t .part-2 {
  right:auto;
  bottom:0;
  left:50%;
  margin-left:-20px;
  width:40px;
  height:auto;
}

.char-small {
  width:75px;
  height:100px;
}

.char-small.char-i {
  width:20px;
  background-color:white;
}

.char-small.char-s span {
  right:0;
  left:0;
  height:20px;
  background-color:white;
}

.char-small.char-s .part-1 {top:0}
.char-small.char-s .part-2 {bottom:0}
.char-small.char-s .part-3 {top:40px}

.char-small.char-s .part-4,
.char-small.char-s .part-5 {
  top:0;
  right:0;
  left:0;
  width:20px;
  height:60px;
}

.char-small.char-s .part-5 {
  top:auto;
  right:0;
  bottom:0;
  left:auto;
}

.bevel:before,
.bevel:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border:10px solid transparent;
  position:absolute;
  z-index:5;
}

.bevel-left-top:before {
  top:0;
  left:0;
  border-color:#222 transparent transparent #222;
}

.bevel-right-top:before {
  top:0;
  right:0;
  border-color:#222 #222 transparent transparent;
}

.bevel-left-bottom:after {
  left:0;
  bottom:0;
  border-color:transparent transparent #222 #222;
}

.bevel-right-bottom:after {
  right:0;
  bottom:0;
  border-color:transparent #222 #222 transparent;
}

.bevel-right-middle:after {
  right:0;
  top:50%;
  margin-top:-10px;
  border-right-color:#222;
}

.bevel-top-middle:before,
.bevel-bottom-middle:after {
  top:0;
  left:50%;
  margin-left:-10px;
  border-top-color:#222;
}

.bevel-bottom-middle:after {
  top:auto;
  bottom:0;
  border-color:transparent transparent #222 transparent;
}

.char-small .bevel:before,
.char-small .bevel:after {border-width:5px}

@keyframes blink {
  0%,
  50% {opacity:0}
  100% {opacity:1}
}

@keyframes show {
  0% {
    opacity:0;
    width:0;
    margin-right:0;
  }
  100% {
    opacity:0;
    width:150px;
    margin-right:5px;
  }
}

@keyframes wShow {
  0% {
    opacity:0;
    width:0;
    margin-right:0;
  }
  100% {
    opacity:0;
    width:200px;
    margin-right:5px;
  }
}

@keyframes iShow {
  0% {
    opacity:0;
    width:0;
    margin-right:0;
  }
  100% {
    opacity:0;
    width:40px;
    margin-right:5px;
  }
}

@keyframes lastFade {
  0% {opacity:0}
  100% {opacity:1}
}

@keyframes spin {
  0% {
    opacity:0;
    transform:scale(0) rotate(-460deg);
  }
  70% {
    opacity:.5;
    transform:scale(0.8) rotate(10deg);
  }
  75% {
    opacity:.5;
    transform:scale(0.8) rotate(-5deg);
  }
  100% {
    opacity:1;
    transform:scale(1) rotate(0deg);
  }
}

.char:not(.collapsed) span,
.char:nth-of-type(11),
.char:nth-of-type(29) {animation:spin 1s ease-out backwards 6000s}

/* white... */

/* S */
.char:nth-of-type(6) .part-1 {animation-delay:0.5s}
.char:nth-of-type(6) .part-2 {animation-delay:0.6s}
.char:nth-of-type(6) .part-3 {animation-delay:0.7s}
.char:nth-of-type(6) .part-4 {animation-delay:0.8s}
.char:nth-of-type(6) .part-5 {animation-delay:0.9s}

/* P */
.char:nth-of-type(7) .part-1 {animation-delay:1s}
.char:nth-of-type(7) .part-2 {animation-delay:1.1s}
.char:nth-of-type(7) .part-3 {animation-delay:1.2s}
.char:nth-of-type(7) .part-4 {animation-delay:1.3s}

/* A */
.char:nth-of-type(8) .part-1 {animation-delay:1.4s}
.char:nth-of-type(8) .part-2 {animation-delay:1.5s}
.char:nth-of-type(8) .part-3 {animation-delay:1.6s}
.char:nth-of-type(8) .part-4 {animation-delay:1.7s}

/* C */
.char:nth-of-type(9) .part-1 {animation-delay:1.8s}
.char:nth-of-type(9) .part-2 {animation-delay:1.9s}
.char:nth-of-type(9) .part-3 {animation-delay:2s}
.char:nth-of-type(9) .part-4 {animation-delay:2.1s}

/* E */
.char:nth-of-type(10) .part-1 {animation-delay:2.2s}
.char:nth-of-type(10) .part-2 {animation-delay:2.3s}
.char:nth-of-type(10) .part-3 {animation-delay:2.4s}
.char:nth-of-type(10) .part-4 {animation-delay:2.5s}

/* i */
.char:nth-of-type(11) {animation-delay:2.6s}

/* s */
.char:nth-of-type(12) .part-1 {animation-delay:2.7s}
.char:nth-of-type(12) .part-2 {animation-delay:2.8s}
.char:nth-of-type(12) .part-3 {animation-delay:2.9s}
.char:nth-of-type(12) .part-4 {animation-delay:3s}
.char:nth-of-type(12) .part-5 {animation-delay:3.1s}

/* B */
.char:nth-of-type(13) .part-1 {animation-delay:3.2s}
.char:nth-of-type(13) .part-2 {animation-delay:3.3s}
.char:nth-of-type(13) .part-3 {animation-delay:3.4s}
.char:nth-of-type(13) .part-4 {animation-delay:3.5s}
.char:nth-of-type(13) .part-5 {animation-delay:3.6s}

/* R */
.char:nth-of-type(14) .part-1 {animation-delay:3.7s}
.char:nth-of-type(14) .part-2 {animation-delay:3.8s}
.char:nth-of-type(14) .part-3 {animation-delay:3.9s}
.char:nth-of-type(14) .part-4 {animation-delay:4s}

/* E */
.char:nth-of-type(15) .part-1 {animation-delay:4.1s}
.char:nth-of-type(15) .part-2 {animation-delay:4.2s}
.char:nth-of-type(15) .part-3 {animation-delay:4.3s}
.char:nth-of-type(15) .part-4 {animation-delay:4.4s}

/* A */
.char:nth-of-type(16) .part-1 {animation-delay:4.5s}
.char:nth-of-type(16) .part-2 {animation-delay:4.6s}
.char:nth-of-type(16) .part-3 {animation-delay:4.7s}
.char:nth-of-type(16) .part-4 {animation-delay:4.8s}

/* T */
.char:nth-of-type(17) .part-1 {animation-delay:4.9s}
.char:nth-of-type(17) .part-2 {animation-delay:5s}

/* H */
.char:nth-of-type(18) .part-1 {animation-delay:5.1s}
.char:nth-of-type(18) .part-2 {animation-delay:5.2s}
.char:nth-of-type(18) .part-3 {animation-delay:5.3s}

/* white... */

/* S */
.char:nth-of-type(24) .part-1 {animation-delay:7s}
.char:nth-of-type(24) .part-2 {animation-delay:7.1s}
.char:nth-of-type(24) .part-3 {animation-delay:7.2s}
.char:nth-of-type(24) .part-4 {animation-delay:7.3s}
.char:nth-of-type(24) .part-5 {animation-delay:7.4s}

/* P */
.char:nth-of-type(25) .part-1 {animation-delay:7.5s}
.char:nth-of-type(25) .part-2 {animation-delay:7.6s}
.char:nth-of-type(25) .part-3 {animation-delay:7.7s}
.char:nth-of-type(25) .part-4 {animation-delay:7.8s}

/* A */
.char:nth-of-type(26) .part-1 {animation-delay:7.9s}
.char:nth-of-type(26) .part-2 {animation-delay:8s}
.char:nth-of-type(26) .part-3 {animation-delay:8.1s}
.char:nth-of-type(26) .part-4 {animation-delay:8.2s}

/* C */
.char:nth-of-type(27) .part-1 {animation-delay:8.3s}
.char:nth-of-type(27) .part-2 {animation-delay:8.4s}
.char:nth-of-type(27) .part-3 {animation-delay:8.5s}
.char:nth-of-type(27) .part-4 {animation-delay:8.6s}

/* E */
.char:nth-of-type(28) .part-1 {animation-delay:8.7s}
.char:nth-of-type(28) .part-2 {animation-delay:8.8s}
.char:nth-of-type(28) .part-3 {animation-delay:8.9s}
.char:nth-of-type(28) .part-4 {animation-delay:9s}

/* i */
.char:nth-of-type(29) {animation-delay:9.1s}

/* s */
.char:nth-of-type(30) .part-1 {animation-delay:9.2s}
.char:nth-of-type(30) .part-2 {animation-delay:9.3s}
.char:nth-of-type(30) .part-3 {animation-delay:9.4s}
.char:nth-of-type(30) .part-4 {animation-delay:9.5s}
.char:nth-of-type(30) .part-5 {animation-delay:9.6s}

/* F */
.char:nth-of-type(31) .part-1 {animation-delay:9.7s}
.char:nth-of-type(31) .part-2 {animation-delay:9.8s}
.char:nth-of-type(31) .part-3 {animation-delay:9.9s}
.char:nth-of-type(31) .part-4 {animation-delay:10s}
.char:nth-of-type(31) .part-5 {animation-delay:10.1s}

/* R */
.char:nth-of-type(32) .part-1 {animation-delay:10.2s}
.char:nth-of-type(32) .part-2 {animation-delay:10.3s}
.char:nth-of-type(32) .part-3 {animation-delay:10.4s}
.char:nth-of-type(32) .part-4 {animation-delay:10.5s}
.char:nth-of-type(32) .part-5 {animation-delay:10.6s}

/* E */
.char:nth-of-type(33) .part-1 {animation-delay:10.7s}
.char:nth-of-type(33) .part-2 {animation-delay:10.8s}
.char:nth-of-type(33) .part-3 {animation-delay:10.9s}
.char:nth-of-type(33) .part-4 {animation-delay:11s}
.char:nth-of-type(33) .part-5 {animation-delay:11.1s}

/* E */
.char:nth-of-type(34) .part-1 {animation-delay:11.2s}
.char:nth-of-type(34) .part-2 {animation-delay:11.3s}
.char:nth-of-type(34) .part-3 {animation-delay:11.4s}
.char:nth-of-type(34) .part-4 {animation-delay:11.5s}
.char:nth-of-type(34) .part-5 {animation-delay:11.6s}

/* D */
.char:nth-of-type(35) .part-1 {animation-delay:11.7s}
.char:nth-of-type(35) .part-2 {animation-delay:11.8s}
.char:nth-of-type(35) .part-3 {animation-delay:11.9s}
.char:nth-of-type(35) .part-4 {animation-delay:12s}
.char:nth-of-type(35) .part-5 {animation-delay:12.1s}

/* O */
.char:nth-of-type(36) .part-1 {animation-delay:12.2s}
.char:nth-of-type(36) .part-2 {animation-delay:12.3s}
.char:nth-of-type(36) .part-3 {animation-delay:12.4s}
.char:nth-of-type(36) .part-4 {animation-delay:12.5s}
.char:nth-of-type(36) .part-5 {animation-delay:12.6s}

/* M */
.char:nth-of-type(37) .part-1 {animation-delay:12.7s}
.char:nth-of-type(37) .part-2 {animation-delay:12.8s}
.char:nth-of-type(37) .part-3 {animation-delay:12.9s}
.char:nth-of-type(37) .part-4 {animation-delay:13s}

/* WHITE */
.char-h.collapsed,
.char-t.collapsed,
.char-e.collapsed {animation:show 1s ease-in-out backwards 3s,lastFade 3s ease-out backwards 15s}
.char-w.collapsed {animation:wShow 1s ease-in-out backwards 3s,lastFade 3s ease-out backwards 15s}
.char-i.collapsed {animation:iShow 1s ease-out backwards 4s,lastFade 3s ease-out backwards 15s}
.char-r ~ .char-h.collapsed,
.char-r ~ .char-t.collapsed,
.char-r ~ .char-e.collapsed {animation:show 1s ease-in-out backwards 9.6s,lastFade 3s ease-out backwards 15s}
.char-r ~ .char-w.collapsed {animation:wShow 1s ease-in-out backwards 9.6s,lastFade 3s ease-out backwards 15s}
.char-r ~ .char-i.collapsed {animation:iShow 1s ease-out backwards 10.6s,lastFade 3s ease-out backwards 15s}

/* Blink */
.blink {animation:blink 1s backwards infinite 18s}

.char-s span {background-color:#B79300}
.char-p span {background-color:#B77C00}
.char-a span {background-color:#B62B00}
.char-c span {background-color:#215576}
.char-e span {background-color:#274050}
.same span {background-color:#B7002E !important}
.char-b span {background-color:#D8C60F}
.char-r span {background-color:#15AD1C}
.char-h span {background-color:#126C74}
.char-e + .char-e span {background-color:#4040AF}
.char-r + .char-e span {background-color:#E84BF5}
.char-e + .char-a span {background-color:#1274DB}
.char-t span {background-color:#179583}
.char-f span {background-color:#aaa}
.char-f + .char-r span {background-color:#ccc}
.char-f + .char-r + .char-e span {background-color:#8E98CE}
.char-d span {background-color:#A248AA}
.char-o span {background-color:#AA8948}
.char-m span {background-color:#CEC450}
.char.collapsed span {background-color:white !important}

@media (max-width:10000px) {
  #typo-wrap {margin:0 auto 500px}
}
@media (max-width:1800px) {
  #typo-wrap {margin:0 auto 500px}
}
@media (max-width:1280px) {
  #typo-wrap {
    overflow:visible;
    transform:scale(0.7);
    margin:-100px -200px 0 -200px;
  }
}
@media (max-width:1024px) {
  #typo-wrap {
    transform:scale(0.5);
    margin:-250px -400px 0 -400px;
  }
}
@media (max-width:1000px) {
  #typo-wrap {
    transform:scale(1);
    margin:0 auto 0 auto;
    padding:22px 10px 10px;
  }
  #typo-wrap .char,
  #typo-wrap .blink {
    float:none;
    display:inline-block;
    margin:0 5px 5px 0;
	vertical-align:top;
  }
  #typo-wrap .blink {height:200px}
  #typo-wrap .char-small.char-i {height:95px}
  #typo-wrap .char-small.char-s {
    top:100px;
	margin-left:-25px;
  }
  #typo-wrap .char.clear {clear:none}
  #typo-wrap .collapsed {
    animation-duration:0s;
    animation-delay:0s;
  }
}
@media (max-width:500px) {
  #footer {padding:10px 15px 30px}
  #footer .left,
  #footer .right {
    float:none;
	display:block;
	text-align:center;
	line-height:normal;
  }
}
@media (max-width:430px) {
  #wrap .date-header {display:none}
}

Не поддерживаются браузеры:

Internet Explorer 9 и ниже.

А вот и пример:

Перевод статьи CSS3 Animated Typography с сайта cssdeck.com, автор Taufik Nurrohman.

Прим. редакции css-live.ru: Ради сокращения и удобочитаемости кода в статье отсутствуют префиксы. В реальных задачах не забывайте о них.

P.S. Это тоже может быть интересно:

CSS-выражения от контейнера для дизайнеров

Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами

«Запашки» кода React-компонентов

Если вам понравилась статья, поделитесь ей!

2 комментария

Максим:

12.09.2014 в 10:27

В примере обычная картинка и никакой анимации

Ответить
1. Максим Усачев:
  
  14.09.2014 в 17:00
  
  Пройдите по следующему адресу: http://cssdeck.com/labs/css3-animated-typography . Это пример анимации.
  
  Ответить

Оставить комментарий Отменить ответ

Max Lensky к Display: contents и его новые…: Вы пишите о симантичности а сами в ссылку поместили…

Евгений к Голограммы, пленочные засветки и шейдеры…: Потрясная статья. Будет полезно знать и иметь что-то такое…

Михаил к На освоение React мне потребовалась…: Конечно можно, притом что ездить ты можешь на механике,…

green к Убираем сдвиги в верстке наложением…: Статья не о чем,контент всегда сдвигается как не крути,особенно…

SelenIT к Подробно о размещении элементов в…: Как вариант, раз картинки выводятся циклом, можно этим же…