Pure CSS Text Animation effects

Wednesday 12th, Sep, 2018 | #UI #HTML 5 #Pure CSS #CSS


Check this cool css3 text animations that you can use in your webs. HTML5 creative text animation that you can copy and paste from owr code editor. With Pure CSS and HTML you can create simil after effect text animation and various text styles. css3 animation effects demo

CSS3 text animation effects examples and code

 

Simple robotic css text effect

html {
  height: 100%;
}

body {
  align-items: center;
  background: #000;
  display: flex;
  height: 100%;
  justify-content: center;
  margin: 0;
}

.glitch {
  animation: glitch-skew 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 4s infinite;
  font-family: orbitron, sans-serif;
  font-size: 8rem;
  font-weight: 900;
  line-height: 1;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  transform-origin: center top;
}
.glitch__main {
  color: #FFF;
}
.glitch__color {
  height: 100%;
  left: 0;
  opacity: 0.8;
  position: absolute;
  top: 0;
  transform-origin: center center;
  width: 100%;
  z-index: -1;
}
.glitch__color--red {
  animation: glitch 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  color: red;
}
.glitch__color--blue {
  animation: glitch 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite reverse;
  color: blue;
}
.glitch__color--green {
  animation: glitch 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 100ms infinite;
  color: #00FF0B;
}
.glitch__line {
  animation: glitch-line 2s linear infinite;
  background: #000;
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
.glitch__line--first {
  animation: glitch-line 2s linear infinite;
}
.glitch__line--second {
  animation: glitch-line 1s linear 1s infinite;
}

@keyframes glitch {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-8px, 8px);
  }
  40% {
    transform: translate(-8px, -8px);
  }
  60% {
    transform: translate(8px, 8px);
  }
  80% {
    transform: translate(8px, -8px);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes glitch-skew {
  0% {
    transform: skew(0deg, 0deg);
  }
  48% {
    transform: skew(0deg, 0deg);
    filter: blur(0);
  }
  50% {
    transform: skew(-20deg, 0deg);
    filter: blur(4px);
  }
  52% {
    transform: skew(20deg, 0deg);
  }
  54% {
    transform: skew(0deg, 0deg);
    filter: blur(0);
  }
  100% {
    transform: skew(0deg, 0deg);
  }
}
@keyframes glitch-line {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}
.stars {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.stars__star {
  border-radius: 50%;
  box-shadow: 0 0 4px 1px #FFF;
  height: 1px;
  position: absolute;
  width: 1px;
  z-index: 100;
}
.stars__star:nth-child(1) {
  top: 78%;
  left: 26%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(2) {
  top: 67%;
  left: 80%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(3) {
  top: 98%;
  left: 9%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(4) {
  top: 99%;
  left: 70%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(5) {
  top: 20%;
  left: 43%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(6) {
  top: 92%;
  left: 68%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(7) {
  top: 71%;
  left: 90%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(8) {
  top: 20%;
  left: 16%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(9) {
  top: 46%;
  left: 82%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(10) {
  top: 23%;
  left: 91%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(11) {
  top: 63%;
  left: 3%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(12) {
  top: 74%;
  left: 36%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(13) {
  top: 16%;
  left: 19%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(14) {
  top: 71%;
  left: 87%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(15) {
  top: 55%;
  left: 14%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(16) {
  top: 86%;
  left: 81%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(17) {
  top: 11%;
  left: 79%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(18) {
  top: 83%;
  left: 89%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(19) {
  top: 62%;
  left: 66%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(20) {
  top: 47%;
  left: 73%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(21) {
  top: 34%;
  left: 23%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(22) {
  top: 53%;
  left: 13%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(23) {
  top: 98%;
  left: 26%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(24) {
  top: 13%;
  left: 10%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(25) {
  top: 51%;
  left: 87%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(26) {
  top: 68%;
  left: 94%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(27) {
  top: 97%;
  left: 85%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(28) {
  top: 96%;
  left: 37%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(29) {
  top: 43%;
  left: 85%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(30) {
  top: 50%;
  left: 64%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(31) {
  top: 17%;
  left: 95%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(32) {
  top: 42%;
  left: 46%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(33) {
  top: 92%;
  left: 68%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(34) {
  top: 47%;
  left: 78%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(35) {
  top: 18%;
  left: 16%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(36) {
  top: 44%;
  left: 28%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(37) {
  top: 36%;
  left: 43%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(38) {
  top: 17%;
  left: 21%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(39) {
  top: 95%;
  left: 77%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(40) {
  top: 90%;
  left: 52%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(41) {
  top: 83%;
  left: 75%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(42) {
  top: 34%;
  left: 3%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(43) {
  top: 59%;
  left: 45%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(44) {
  top: 4%;
  left: 86%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(45) {
  top: 36%;
  left: 55%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(46) {
  top: 39%;
  left: 32%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(47) {
  top: 85%;
  left: 92%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(48) {
  top: 2%;
  left: 56%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(49) {
  top: 42%;
  left: 38%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(50) {
  top: 45%;
  left: 95%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(51) {
  top: 30%;
  left: 45%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(52) {
  top: 4%;
  left: 6%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(53) {
  top: 65%;
  left: 66%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(54) {
  top: 39%;
  left: 55%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(55) {
  top: 17%;
  left: 97%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(56) {
  top: 90%;
  left: 93%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(57) {
  top: 18%;
  left: 66%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(58) {
  top: 87%;
  left: 9%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(59) {
  top: 37%;
  left: 48%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(60) {
  top: 76%;
  left: 71%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(61) {
  top: 26%;
  left: 73%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(62) {
  top: 83%;
  left: 36%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(63) {
  top: 66%;
  left: 56%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(64) {
  top: 70%;
  left: 38%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(65) {
  top: 35%;
  left: 28%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(66) {
  top: 73%;
  left: 74%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(67) {
  top: 72%;
  left: 15%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(68) {
  top: 89%;
  left: 23%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(69) {
  top: 9%;
  left: 33%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(70) {
  top: 39%;
  left: 14%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(71) {
  top: 37%;
  left: 32%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(72) {
  top: 52%;
  left: 22%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(73) {
  top: 29%;
  left: 21%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(74) {
  top: 91%;
  left: 13%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(75) {
  top: 59%;
  left: 52%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(76) {
  top: 44%;
  left: 21%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(77) {
  top: 69%;
  left: 100%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(78) {
  top: 17%;
  left: 44%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(79) {
  top: 2%;
  left: 34%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(80) {
  top: 14%;
  left: 20%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(81) {
  top: 88%;
  left: 96%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(82) {
  top: 76%;
  left: 37%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(83) {
  top: 61%;
  left: 24%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(84) {
  top: 47%;
  left: 10%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(85) {
  top: 59%;
  left: 50%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(86) {
  top: 90%;
  left: 93%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(87) {
  top: 50%;
  left: 97%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(88) {
  top: 75%;
  left: 93%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(89) {
  top: 84%;
  left: 82%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(90) {
  top: 34%;
  left: 15%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(91) {
  top: 77%;
  left: 10%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(92) {
  top: 3%;
  left: 33%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(93) {
  top: 75%;
  left: 75%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(94) {
  top: 85%;
  left: 15%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(95) {
  top: 72%;
  left: 95%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(96) {
  top: 20%;
  left: 88%;
  box-shadow: 0 0 4px 2px #FFF;
}
.stars__star:nth-child(97) {
  top: 64%;
  left: 91%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(98) {
  top: 9%;
  left: 83%;
  box-shadow: 0 0 4px 1px #FFF;
}
.stars__star:nth-child(99) {
  top: 82%;
  left: 57%;
  box-shadow: 0 0 4px 3px #FFF;
}
.stars__star:nth-child(100) {
  top: 34%;
  left: 24%;
  box-shadow: 0 0 4px 3px #FFF;
}

<div class="glitch" data-text="Strobocops">

    <span class="glitch__color glitch__color--red">Strobocops</span>
    <span class="glitch__color glitch__color--blue">Strobocops</span>
    <span class="glitch__color glitch__color--green">Strobocops</span>
    <span class="glitch__main">Strobocops</span>
    <span class="glitch__line glitch__line--first"></span>
    <span class="glitch__line glitch__line--second"></span>
</div>

<div class="stars">
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
    <div class="stars__star"></div>
</div>

Simple text animation css

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');
body {
  margin:0px;
  text-align:center;
  padding-top:43vh;
  color:#fff;
  font-family:'Roboto';
  font-size:36px;
  font-weight:100;
  overflow:hidden;
  animation:bg 5s linear infinite;
}

.dropping-texts {
  display: inline-block;
  width: 180px;
  text-align: left;
  height: 36px;
  vertical-align: -2px;
}

.dropping-texts > div {
  font-size:0px;
  opacity:0;
  margin-left:-30px;
  position:absolute;
  font-weight:300;   
  box-shadow: 0px 60px 25px -20px rgba(0,0,0,0.5);
}

.dropping-texts > div:nth-child(1) {
  animation: roll 5s linear infinite 0s;
}
.dropping-texts > div:nth-child(2) {
  animation: roll 5s linear infinite 1s;
}
.dropping-texts > div:nth-child(3) {
  animation: roll 5s linear infinite 2s;
}
.dropping-texts > div:nth-child(4) {
  animation: roll2 5s linear infinite 3s;
}

@keyframes roll {
  0% {
    font-size:0px;
    opacity:0;
    margin-left:-30px;
    margin-top:0px;
    transform: rotate(-25deg);
  }
  3% {
    opacity:1;
    transform: rotate(0deg);
  }
  5% {
    font-size:inherit;
    opacity:1;
    margin-left:0px;
    margin-top:0px;
  }
  20% {
    font-size:inherit;
    opacity:1;
    margin-left:0px;
    margin-top:0px;
    transform: rotate(0deg);
  }
  27% {
    font-size:0px;
    opacity:0.5;
    margin-left:20px;
    margin-top:100px;
  }
  100% {
    font-size:0px;
    opacity:0;
    margin-left:-30px;
    margin-top:0px;
    transform: rotate(15deg);
  }
}

@keyframes roll2 {
  0% {
    font-size:0px;
    opacity:0;
    margin-left:-30px;
    margin-top:0px;
    transform: rotate(-25deg);
  }
  3% {
    opacity:1;
    transform: rotate(0deg);
  }
  5% {
    font-size:inherit;
    opacity:1;
    margin-left:0px;
    margin-top:0px;
  }
  30% {
    font-size:inherit;
    opacity:1;
    margin-left:0px;
    margin-top:0px;
    transform: rotate(0deg);
  }
  37% {
    font-size:1500px;
    opacity:0;
    margin-left:-1000px;
    margin-top:-800px;
  }
  100% {
    font-size:0px;
    opacity:0;
    margin-left:-30px;
    margin-top:0px;
    transform: rotate(15deg);
  }
}

@keyframes bg {
  0% {background: #ff0075;}
  3% {background: #0094ff;}
  20% {background: #0094ff;}
  23% {background: #b200ff;}
  40% {background: #b200ff;}
  43% {background: #8BC34A;}
  60% {background: #8BC34A;}
  63% {background: #F44336;}
  80% {background: #F44336;}
  83% {background: #F44336;}
  100% {background: #F44336;}
}
<body>
UX works for 
<div class="dropping-texts">
  <div>Developers</div>
  <div>Designers</div>
  <div>Coders</div>
  <div>EVERYONE!</div>
</div>
</body>

Pure css text animation

@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy");
/* BODY */
body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(90deg, skyblue 0%, steelblue 100%);
  background-attachment: fixed;
  background-size: 100% 100%;
  overflow: hidden;
  font-family: "Luckiest Guy", cursive;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: transparent;
}
/* CLOUDS */
body:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  margin: auto;
  border-radius: 100%;
  background: transparent;
  display: block;
  box-shadow: 0 0 150px 100px rgba(255, 255, 255, 0.6),
    200px 0 200px 150px rgba(255, 255, 255, 0.6),
    -250px 0 300px 150px rgba(255, 255, 255, 0.6),
    550px 0 300px 200px rgba(255, 255, 255, 0.6),
    -550px 0 300px 200px rgba(255, 255, 255, 0.6);
}
/* JUMP */
h1 {
  cursor: default;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  margin: auto;
  display: block;
  text-align: center;
}

h1 span {
  position: relative;
  top: 20px;
  display: inline-block;
  -webkit-animation: bounce 0.3s ease infinite alternate;
  font-size: 80px;
  color: #fff;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
    0 5px 0 #ccc, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,
    0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.4);
}

h1 span:nth-child(2) {
  -webkit-animation-delay: 0.1s;
}

h1 span:nth-child(3) {
  -webkit-animation-delay: 0.2s;
}

h1 span:nth-child(4) {
  -webkit-animation-delay: 0.3s;
}

h1 span:nth-child(5) {
  -webkit-animation-delay: 0.4s;
}

h1 span:nth-child(6) {
  -webkit-animation-delay: 0.5s;
}

h1 span:nth-child(7) {
  -webkit-animation-delay: 0.6s;
}

h1 span:nth-child(8) {
  -webkit-animation-delay: 0.2s;
}

h1 span:nth-child(9) {
  -webkit-animation-delay: 0.3s;
}

h1 span:nth-child(10) {
  -webkit-animation-delay: 0.4s;
}

h1 span:nth-child(11) {
  -webkit-animation-delay: 0.5s;
}

h1 span:nth-child(12) {
  -webkit-animation-delay: 0.6s;
}

h1 span:nth-child(13) {
  -webkit-animation-delay: 0.7s;
}

h1 span:nth-child(14) {
  -webkit-animation-delay: 0.8s;
}

/* ANIMATION */
@-webkit-keyframes bounce {
  100% {
    top: -20px;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
      0 5px 0 #ccc, 0 6px 0 #ccc, 0 7px 0 #ccc, 0 8px 0 #ccc, 0 9px 0 #ccc,
      0 50px 25px rgba(0, 0, 0, 0.2);
  }
}

<h1>
  <span>a</span>
  <span>r</span>
  <span>l</span>
  <span>i</span>
  <span>n</span>
  <span>a</span>
</br>
  <span>d</span>
  <span>e</span>
  <span>s</span>
  <span>i</span>
  <span>g</span>
  <span>n</span>
</h1>

SVG HTML and CSS text effect code examples

body {
  background: black;
  color: white;
}

.svg-obj {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.path {
    fill: white;
    fill-opacity: 0;
    stroke: white;
    stroke-width: 5;
    stroke-linecap: round;

    stroke-dasharray: 860;
    stroke-dashoffset: 860;
    animation: draw 2s linear forwards;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@-moz-keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}
@-o-keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

<svg class="svg-obj" width="600" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="-4 25 971 169" enable-background="new -4 25 971 169" xml:space="preserve">
<g>
	<path class="path" d="M5.6,34.5H68c8,0,15.1,1.1,21.3,3.4c6.2,2.2,11.5,5.4,15.8,9.3c4.3,4,7.6,8.8,9.9,14.3c2.3,5.5,3.5,11.6,3.5,18.2
		c0,8.4-1.2,15.3-3.7,20.7c-2.5,5.4-5.3,9.7-8.5,12.9c-3.2,3.2-6.5,5.6-9.8,7.1c-3.3,1.5-5.8,2.7-7.7,3.4l33.4,60.3H89.6l-29-55
		H33.8v55H5.6V34.5z M33.8,104.2h30.7c7.1,0,13-2,17.6-5.9c4.6-3.9,6.9-9.5,6.9-16.6c0-6.9-2.3-12.3-7-16.4
		c-4.7-4.1-11.9-6.1-21.7-6.1H33.8V104.2z"/>
	<path class="path" d="M200.5,34.5h32.8l50,149.5h-29.4l-8.6-29h-56.7l-8.6,29h-29.4L200.5,34.5z M217.1,61.8h-0.4l-20.6,68.5h41.6L217.1,61.8z"
		/>
	<path class="path" d="M323.2,34.5h52.5c12.9,0,24,1.9,33.3,5.7c9.3,3.8,16.9,9,22.9,15.6c5.9,6.7,10.3,14.6,13.1,23.7c2.8,9.2,4.2,19.1,4.2,29.7
		c0,24.5-5.8,43.1-17.3,55.8c-11.5,12.7-28.5,19-50.9,19h-57.8V34.5z M351.3,158h25.6c6.9,0,13-0.7,18.4-2.2c5.4-1.5,9.9-4,13.4-7.7
		c3.6-3.6,6.3-8.6,8.2-14.9c1.9-6.3,2.8-14.3,2.8-23.9c0-7.3-0.8-13.9-2.5-20c-1.7-6-4.3-11.2-7.8-15.4c-3.5-4.3-8-7.6-13.4-9.9
		c-5.5-2.3-12-3.5-19.7-3.5h-25V158z"/>
	<path class="path" d="M507.8,139.1c5.3,7.8,11.9,13.6,19.6,17.2c7.8,3.6,16.3,5.5,25.5,5.5c3.4,0,6.9-0.3,10.7-0.9s7.2-1.7,10.3-3.2
		c3.1-1.5,5.6-3.4,7.7-5.9c2-2.4,3-5.5,3-9.1c0-2.9-0.7-5.4-2-7.3c-1.3-2-3.3-3.7-6-5.1c-2.7-1.5-5.9-2.8-9.7-3.9
		c-3.8-1.1-8.2-2.2-13.2-3.4l-16.6-3.8c-6-1.4-11.7-3.1-17.1-5c-5.4-2-10.2-4.5-14.3-7.7c-4.1-3.1-7.4-7.1-9.9-11.8
		c-2.5-4.7-3.7-10.5-3.7-17.3c0-7.8,1.7-14.7,5.1-20.6c3.4-5.9,7.9-10.7,13.3-14.6c5.5-3.8,11.7-6.7,18.6-8.6
		c6.9-1.9,13.9-2.8,20.9-2.8c12.9,0,24.5,2.4,35,7.2c10.4,4.8,19.6,12.4,27.4,22.8l-23.3,17.6c-3.6-6.9-8.8-12.2-15.4-16
		c-6.7-3.8-14.6-5.7-23.8-5.7c-8.1,0-14.9,1.4-20.3,4.3c-5.4,2.9-8.1,7-8.1,12.3c0,3.1,0.8,5.6,2.4,7.7c1.6,2,3.8,3.7,6.7,5.1
		c2.9,1.4,6.2,2.6,9.9,3.5c3.7,0.9,7.7,1.9,11.9,2.8l18.3,4c5.6,1.3,11,2.8,16.2,4.7c5.2,1.9,9.8,4.4,13.8,7.6s7.2,7.1,9.7,12
		c2.4,4.8,3.7,10.8,3.7,18c0,9.1-2,16.8-5.9,23.1c-3.9,6.3-9,11.4-15.2,15.2c-6.2,3.9-13.3,6.6-21.1,8.3c-7.8,1.7-15.6,2.5-23.3,2.5
		c-6.2,0-12.3-0.7-18.5-2c-6.2-1.3-12.1-3.3-17.7-6c-5.7-2.7-11-5.9-15.9-9.9c-4.9-3.9-9.1-8.5-12.6-13.6L507.8,139.1z"/>
	<path class="path" d="M780.5,138c0,7.6-1.4,14.4-4.3,20.6c-2.9,6.2-7,11.4-12.3,15.8c-5.3,4.3-11.7,7.7-19.1,10c-7.4,2.3-15.6,3.5-24.6,3.5
		c-9.1,0-17.3-1.2-24.7-3.5c-7.4-2.3-13.7-5.6-19-10c-5.3-4.3-9.4-9.6-12.3-15.8c-2.9-6.2-4.3-13-4.3-20.6V34.5h28.1v96.2
		c0,4.6,0.5,8.8,1.6,12.4c1,3.6,2.8,6.8,5.4,9.3c2.5,2.6,5.8,4.6,9.9,6c4.1,1.4,9.2,2.1,15.3,2.1c6,0,11.1-0.7,15.2-2.1
		c4.1-1.4,7.5-3.4,10-6c2.5-2.6,4.3-5.7,5.4-9.3c1.1-3.6,1.6-7.8,1.6-12.4V34.5h28.1V138z"/>
	<path class="path" d="M834.3,34.5h28.1v67.2l59.2-67.2h33.4l-48.9,56.7l52.3,92.8h-32.5l-39.5-69.9l-23.9,27.1V184h-28.1V34.5z"/>
</g>
</svg>

Flash light css text effect

html {
  background-color: #222;
}


h1, h2, h3 {
  font-family: 'Monoton', cursive;

  font-size: 40px;
}

h1 {
  color: #fff;
  -webkit-animation: h1 8s infinite; 
  animation: h1 8s infinite;
}

h2 {
  color: white;
  -webkit-animation: h2 0.35s infinite; 
  animation: h2 0.35s infinite;
}

h3 {

  background: -webkit-linear-gradient(#fff, #eee, #fff, #666, #eee, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
text-shadow: 0px 1px 45px rgba(255, 255, 255, 0.2);
}


div {
    text-align: center;
    position: relative;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes h1 {
    0%   {text-shadow: 0 0 3px #FF0000; color: #fff;}
    25%  {text-shadow: 0 0 12px #FF0000;}
    50%  {text-shadow: 0 0 20px #FF0000; color: pink;}
    75%  {text-shadow: 0 0 12px #FF0000;}
    100% {text-shadow: 0 0 3px #FF0000; color: #fff;}
}

@-webkit-keyframes h2 {
    0%   {text-shadow: 0 0 6px #FFF;}
    100%  {text-shadow: 0 0 0px #000;}
}

/* Internet Explorer */

@keyframes h1 {
    0%   {text-shadow: 0 0 3px #FF0000; color: #fff;}
    25%  {text-shadow: 0 0 12px #FF0000;}
    50%  {text-shadow: 0 0 20px #FF0000; color: pink;}
    75%  {text-shadow: 0 0 12px #FF0000;}
    100% {text-shadow: 0 0 3px #FF0000; color: #fff;}
}

@keyframes h2 {
    0%   {text-shadow: 0 0 6px #FFF;}
    100%  {text-shadow: 0 0 0px #000;}
}

<!DOCTYPE html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'>
</head>
<body>

<div class = "headers">
  <h1>Slow Glow</h1>
  <h2>Fast Flash</h2>
  <h3>Fine Shine</h3>

</div>

</body>
</html>


css text animation letter by letter

 setInterval(function(){$('.text-anim').toggleClass('animate');
  },2000);
body {
  background: #000000;
  background-size: cover;
  font-family: 'Oswald', sans-serif;
}

.text-anim {
  color: #ffffff;
  font-size: 32px;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
}

/* ==========================================================================
	 Main Animation	 ========================================================================== */
.text-anim span {
  opacity: 0;
  transition: all, 550ms;
  -webkit-filter: blur(25px);
  -moz-filter: blur(25px);
  -ms-filter: blur(25px);
  filter: blur(25px);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.text-anim span:nth-child(22) {
  transition-delay: 770ms;
}
.text-anim span:nth-child(21) {
  transition-delay: 735ms;
}
.text-anim span:nth-child(20) {
  transition-delay: 700ms;
}
.text-anim span:nth-child(19) {
  transition-delay: 665ms;
}
.text-anim span:nth-child(18) {
  transition-delay: 630ms;
}
.text-anim span:nth-child(17) {
  transition-delay: 595ms;
}
.text-anim span:nth-child(16) {
  transition-delay: 560ms;
}
.text-anim span:nth-child(15) {
  transition-delay: 525ms;
}
.text-anim span:nth-child(14) {
  transition-delay: 490ms;
}
.text-anim span:nth-child(13) {
  transition-delay: 455ms;
}
.text-anim span:nth-child(12) {
  transition-delay: 420ms;
}
.text-anim span:nth-child(11) {
  transition-delay: 385ms;
}
.text-anim span:nth-child(10) {
  transition-delay: 350ms;
}
.text-anim span:nth-child(9) {
  transition-delay: 315ms;
}
.text-anim span:nth-child(8) {
  transition-delay: 280ms;
}
.text-anim span:nth-child(7) {
  transition-delay: 245ms;
}
.text-anim span:nth-child(6) {
  transition-delay: 210ms;
}
.text-anim span:nth-child(5) {
  transition-delay: 175ms;
}
.text-anim span:nth-child(4) {
  transition-delay: 140ms;
}
.text-anim span:nth-child(3) {
  transition-delay: 105ms;
}
.text-anim span:nth-child(2) {
  transition-delay: 70ms;
}
.text-anim span:nth-child(1) {
  transition-delay: 35ms;
}

.text-anim.animate span {
  opacity: 1;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
}
<html>
<head>
	<title>Animated Text</title>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="text.css">
</head>
<body>
<div class="text-anim">
<span>L</span>
<span>U</span>
<span>K</span>
<span>E</span>
<span>,</span>
<span> </span>
<span>I</span>
<span> </span>
<span>A</span>
<span>M</span>
<span>&nbsp;</span>
<span>Y</span>
<span>O</span>
<span>U</span>
<span>R </span>
<span>&nbsp;</span>
<span>F</span>
<span>A</span>
<span>T</span>
<span>H</span>
<span>E</span>
<span>R</span>

</div>

</body>

</html>