12种CSS3+JS炫酷文字动画特效

这是一款CSS3和JS制作的炫酷文字动画特效合集。该文字动画特效共有12种不同的效果，每一种文字动画分别实现不同的字母旋转、翻转和运动效果，非常炫酷。

使用方法

这里以第一种文字动画效果为例：

HTML代码

<div class="cascading-text cascading-text--random" data-animated="data-animated">
    <div class="cascading-text__replay">replay?</div>
    <div class="cascading-text__letter tx--white">p</div>
    <div class="cascading-text__letter tx--white">e</div>
    <div class="cascading-text__letter tx--white">n</div>
    <div class="cascading-text__letter tx--red">d</div>
    <div class="cascading-text__letter tx--red">e</div>
    <div class="cascading-text__letter tx--red">v</div>
    <div class="cascading-text__letter tx--red">e</div>
    <div class="cascading-text__letter tx--red">l</div>
    <div class="cascading-text__letter tx--red">o</div>
    <div class="cascading-text__letter tx--red">p</div>
    <div class="cascading-text__letter tx--red">e</div>
    <div class="cascading-text__letter tx--red">r</div>
</div>
		

CSS代码

.cascading-text {
  position: relative;
}

.cascading-text--random[data-animated] .cascading-text__letter {
  -webkit-animation-name: random;
          animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
  animation-name: random;
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(1) {
  transform: translateX(-55%) translateY(-95%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(2) {
  transform: translateX(-95%) translateY(168%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(3) {
  transform: translateX(162%) translateY(40%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(4) {
  transform: translateX(54%) translateY(236%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(5) {
  transform: translateX(74%) translateY(198%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(6) {
  transform: translateX(186%) translateY(130%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(7) {
  transform: translateX(124%) translateY(-229%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(8) {
  transform: translateX(-119%) translateY(-241%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(9) {
  transform: translateX(-65%) translateY(112%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(10) {
  transform: translateX(-53%) translateY(100%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(11) {
  transform: translateX(198%) translateY(-85%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(12) {
  transform: translateX(198%) translateY(44%);
}
.cascading-text--random[data-animated] .cascading-text__letter:nth-of-type(13) {
  transform: translateX(-31%) translateY(216%);
}

.cascading-text__letter {
  font-size: 25px;
  line-height: 25px;
  display: inline-block;
  transform-style: preserve-3d;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.cascading-text__letter:nth-of-type(1) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.cascading-text__letter:nth-of-type(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.cascading-text__letter:nth-of-type(3) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.cascading-text__letter:nth-of-type(4) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.cascading-text__letter:nth-of-type(5) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.cascading-text__letter:nth-of-type(6) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.cascading-text__letter:nth-of-type(7) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.cascading-text__letter:nth-of-type(8) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.cascading-text__letter:nth-of-type(9) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.cascading-text__letter:nth-of-type(10) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.cascading-text__letter:nth-of-type(11) {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
.cascading-text__letter:nth-of-type(12) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.cascading-text__letter:nth-of-type(13) {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}

@-webkit-keyframes random {
  25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}
@keyframes random {
  25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}
		

codepen网址：https://codepen.io/jh3y/pen/wJMPYQ