Three examples of what can be done with the transition CSS property.
Random individual letter fade
See source code
<style>
.transition1{
background-image: linear-gradient(135deg, #723362, #9d223c);
background-color: #9d223c;
color: #fff;
padding : 1em 0;
font-weight: 300;
font-size: 1.8em;
text-transform: uppercase;
text-align: center;
letter-spacing: .4em;
padding-left: .4em;
margin: 5px
}
.transition1 span{
opacity: 0;
transition: opacity 1300ms
}
.transition1 span:nth-child(1) { transition-delay: 200ms }
.transition1 span:nth-child(2) { transition-delay: 1200ms }
.transition1 span:nth-child(3) { transition-delay: 800ms }
.transition1 span:nth-child(4) { transition-delay: 300ms }
.transition1 span:nth-child(5) { transition-delay: 700ms }
.transition1 span:nth-child(6) { transition-delay: 600ms }
.transition1 span:nth-child(7) { transition-delay: 400ms }
.transition1 span:nth-child(8) { transition-delay: 900ms }
.transition1 span:nth-child(9) { transition-delay: 700ms }
.transition1 span:nth-child(10) { transition-delay: 50ms }
.transition1:hover span{
opacity: 1
}
</style>
<div class="transition1">
<span>d</span>
<span>i</span>
<span>g</span>
<span>i</span>
<span>t</span>
<span>o</span>
<span>o</span>
<span>l</span>
<span>s</span>
</div>
Multiple transitions and delays
See source code<style>
.transition2{
background: #fff;
color: #000;
text-align: center;
border: .5em solid;
font-size: 1.5em;
padding: 1em 0;
margin: 5px
}
.transition2 .title{
letter-spacing: .4em;
padding-left: .4em;
font-weight: 700
}
.transition2 .author{
color: #888;
font-style: italic;
font-size: .7em;
font-weight: 300;
letter-spacing: .12em;
padding-left: .12em
}
.transition2 .title span,
.transition2 .author span{
display: inline-block;
opacity: 0;
transition: -webkit-transform 800ms, opacity 800ms
}
.transition2 .title span {-webkit-transform: translateZ(0) translateY(-6rem)}
.transition2 .author span {-webkit-transform: translateZ(0) translateY(6rem)}
.transition2:hover .title span,
.transition2:hover .author span {
opacity: 1;
transition: -webkit-transform 800ms, opacity 1200ms;
-webkit-transform: translateZ(0) translateY(0)
}
.transition2 .title span:nth-child(1) { transition-delay: 360ms, 300ms }
.transition2 .title span:nth-child(2) { transition-delay: 420ms, 300ms }
.transition2 .title span:nth-child(3) { transition-delay: 480ms, 300ms }
.transition2 .title span:nth-child(4) { transition-delay: 540ms, 300ms }
.transition2 .title span:nth-child(5) { transition-delay: 600ms, 300ms }
.transition2 .title span:nth-child(6) { transition-delay: 660ms, 300ms }
.transition2 .title span:nth-child(7) { transition-delay: 720ms, 300ms }
.transition2 .title span:nth-child(8) { transition-delay: 780ms, 300ms }
.transition2 .title span:nth-child(9) { transition-delay: 840ms, 300ms }
.transition2 .author span:nth-child(1) { transition-delay: 420ms, 0ms }
.transition2 .author span:nth-child(2) { transition-delay: 390ms, 0ms }
.transition2 .author span:nth-child(3) { transition-delay: 360ms, 0ms }
.transition2 .author span:nth-child(4) { transition-delay: 330ms, 0ms }
.transition2 .author span:nth-child(5) { transition-delay: 300ms, 0ms }
.transition2 .author span:nth-child(6) { transition-delay: 270ms, 0ms }
.transition2 .author span:nth-child(7) { transition-delay: 240ms, 0ms }
.transition2 .author span:nth-child(8) { transition-delay: 210ms, 0ms }
.transition2 .author span:nth-child(9) { transition-delay: 180ms, 0ms }
.transition2 .author span:nth-child(10) { transition-delay: 150ms, 0ms }
.transition2 .author span:nth-child(11) { transition-delay: 120ms, 0ms }
.transition2 .author span:nth-child(12) { transition-delay: 90ms, 0ms }
.transition2:hover .title span,
.transition2:hover .author span {transition-delay: 0}
</style>
<div class="transition2">
<div class="title">
<span>D</span>
<span>i</span>
<span>g</span>
<span>i</span>
<span>T</span>
<span>o</span>
<span>o</span>
<span>l</span>
<span>s</span>
</div>
<div class="author">
<span>b</span>
<span>y</span>
<span> </span>
<span>n</span>
<span>i</span>
<span>c</span>
<span>o</span>
<span>c</span>
<span>a</span>
<span>s</span>
<span>e</span>
<span>l</span>
</div>
</div>
3D transformation
See source code<style>
.transition3{
color: #fff;
border: .2em solid #ff4136;
text-align: center;
font-size: 3em;
padding: .2em
}
.transition3 .letter{
display: inline-block;
width: 12%;
padding: .8125rem;
position: relative;
-webkit-perspective: 20rem
}
.transition3 .letter:before{content: "\00a0"}
.transition3 .front,
.transition3 .back{
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
line-height: 1.75em;
-webkit-backface-visibility: hidden;
transition: -webkit-transform 800ms
}
.transition3 .letter:nth-child(1) .front { background: #ff4136 }
.transition3 .letter:nth-child(2) .front { background: #ff851b }
.transition3 .letter:nth-child(3) .front { background: #2ecc40 }
.transition3 .letter:nth-child(4) .front { background: #0074d9 }
.transition3 .letter:nth-child(5) .front { background: #b10dc9 }
.transition3 .back{
border: .5rem solid;
background: #fff;
color: #000;
line-height: 1.5em;
-webkit-transform: translateZ(0) rotateY(-180deg)
}
.transition3 .letter:nth-child(1) .back { border-color: #ff4136 }
.transition3 .letter:nth-child(2) .back { border-color: #ff851b }
.transition3 .letter:nth-child(3) .back { border-color: #2ecc40; background: #2ecc40; color: #fff }
.transition3.letter:nth-child(4) .back { border-color: #0074d9; background: #0074d9; color: #fff }
.transition3 .letter:nth-child(5) .back { border-color: #b10dc9; background: #b10dc9; color: #fff }
.transition3:hover .back{-webkit-transform: translateZ(0) rotateY(0deg)}
.transition3:hover .front{-webkit-transform: translateZ(0) rotateY(-180deg)}
.transition3 .letter:nth-child(1) span { transition-delay: 200ms }
.transition3 .letter:nth-child(2) span { transition-delay: 400ms }
.transition3 .letter:nth-child(3) span { transition-delay: 600ms }
.transition3 .letter:nth-child(4) span { transition-delay: 800ms }
.transition3 .letter:nth-child(5) span { transition-delay: 1000ms }
.transition3:before{
background: #ff4136;
z-index: 1
}
</style>
<div class="t transition3">
<span class="letter">
<span class="back">F</span>
<span class="front">R</span>
</span>
<span class="letter">
<span class="back">I</span>
<span class="front">E</span>
</span>
<span class="letter">
<span class="back">G</span>
<span class="front">A</span>
</span>
</span>
<span class="letter">
<span class="back">H</span>
<span class="front">D</span>
</span>
<span class="letter">
<span class="back">T</span>
<span class="front">Y</span>
</span>
</div>