纯CSS文字动画特效|CSS3 For Animations

今天刚帮客户写了个CSS动画效果样式，具体看样式的注释

<style>
.animate {
  font-size: 35px;
  margin: 100px 0 0;
  border-bottom: 2px solid #ccc;
}

.animate span {
  display: inline-block;
}

/* animate顺序自定义时间 */
.animate span:nth-of-type(2) {
  animation-delay: .05s;
}
.animate span:nth-of-type(3) {
  animation-delay: .1s;
}
.animate span:nth-of-type(4) {
  animation-delay: .15s;
}
.animate span:nth-of-type(5) {
  animation-delay: .2s;
}
.animate span:nth-of-type(6) {
  animation-delay: .25s;
}
.animate span:nth-of-type(7) {
  animation-delay: .3s;
}
.animate span:nth-of-type(8) {
  animation-delay: .35s;
}
.animate span:nth-of-type(9) {
  animation-delay: .4s;
}
.animate span:nth-of-type(10) {
  animation-delay: .45s;
}
.animate span:nth-of-type(11) {
  animation-delay: .5s;
}
.animate span:nth-of-type(12) {
  animation-delay: .55s;
}
.animate span:nth-of-type(13) {
  animation-delay: .6s;
}
.animate span:nth-of-type(14) {
  animation-delay: .65s;
}



/* 主Animation控制样式*/


/* Animation One */

.one span {
  color: #24a8e6;
  opacity: 0;
  transform: translate(-150px, -50px) rotate(-180deg) scale(3);
  animation: revolveScale .4s forwards; /* 【.4s是秒的一半，去掉.是秒；在后面多增一个时间可控制相隔的两个样式不同时间执行】【infinite无限次播放；forwards停留在结束状态（forwards前可增加数字表示几次后再停止）】 */
}

/* 定义Animation的关键词 使用百分比来定义执行的渐变度 */
@keyframes revolveScale {
  60% {
    transform: translate(20px, 20px) rotate(30deg) scale(.3);
  }
  100% {
    transform: translate(0) rotate(0) scale(1);
    opacity: 1; /* 1-9表示不同的透明度 */
  }
}


/* Animation Two */

.two span {
  color: #a5cb21;
  opacity: 0;
  transform: translate(200px, -100px) scale(2);
  animation: ballDrop .3s forwards;
}

@keyframes ballDrop {
  60% {
    transform: translate(0, 20px) rotate(-180deg) scale(.5);
  }
  100% {
    transform: translate(0) rotate(0deg) scale(1);
    opacity: 1;
  }
}


/* Animation Three */

.three span {
  color: #b10e81;
  opacity: 0;
  transform: translate(-300px, 0) scale(0);
  animation: sideSlide .5s forwards;
}

@keyframes sideSlide {
  60% {
    transform: translate(20px, 0) scale(1);
    color: #b10e81;
  }
  80% {
    transform: translate(20px, 0) scale(1);
    color: #b10e81;
  }
  99% {
    transform: translate(0) scale(1.2);
    color: #00f0ff;
  }
  100% {
    transform: translate(0) scale(1);
    opacity: 1;
    color: #b10e81;
  }
}


/* Animation Four */

.four span {
  color: #8d6a00;
  opacity: 0;
  transform: translate(0, -100px) rotate(360deg) scale(0);
  animation: revolveDrop .3s forwards;
}

@keyframes revolveDrop {
  30% {
    transform: translate(0, -50px) rotate(180deg) scale(1);
  }
  60% {
    transform: translate(0, 20px) scale(.8) rotate(0deg);
  }
  100% {
    transform: translate(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}


/* Animation Five */

.five span {
  color: #dd3f0f;
  opacity: 0;
  transform: translate(0, -100px) rotate(360deg) scale(0);
  animation: dropVanish .5s forwards;
}

@keyframes dropVanish {
  30% {
    transform: translate(0, -50px) rotate(180deg) scale(1);
  }
  50% {
    transform: translate(0, 20px) scale(.8) rotate(0deg);
    opacity: 1;
  }
  80% {
    transform: translate(-100px, -100px) scale(1.5) rotate(-180deg);
    opacity: 0;
  }
  100% {
    transform: translate(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}


/* Animation Six */

.six span {
  color: #ddb40f;
  opacity: 0;
  transform: rotate(-180deg) translate(150px, 0);
  animation: twister .5s forwards;
}

@keyframes twister {
  10% {
    opacity: 1;
  }
  100% {
    transform: rotate(0deg) translate(0);
    opacity: 1;
  }
}


/* Animation Seven */

.seven span {
  color: #348c04;
  opacity: 0;
  transform: translate(-150px, 0) scale(.3);
  animation: leftRight .5s forwards;
}

@keyframes leftRight {
  40% {
    transform: translate(50px, 0) scale(.7);
    opacity: 1;
    color: #348c04;
  }
  60% {
    color: #0f40ba;
  }
  80% {
    transform: translate(0) scale(2);
    opacity: 0;
  }
  100% {
    transform: translate(0) scale(1);
    opacity: 1;
  }
}
</style>


  <div class="animate one">
    <span><i class="xulgricon-xg30">&#xe619;</i></span><span>雪</span><span>哥</span>
       <span>X</span><span>U</span><span>L</span><span>G</span><span>R</span><span>.</span><span>C</span><span>O</span><span>M</span>
  </div>

  <div class="animate two">
    <span><i class="xulgricon-xg30">&#xe619;</i></span><span>雪</span><span>哥</span>
       <span>X</span><span>U</span><span>L</span><span>G</span><span>R</span><span>.</span><span>C</span><span>O</span><span>M</span>
  </div>

  <div class="animate three">
    <span><i class="xulgricon-xg30">&#xe619;</i></span><span>雪</span><span>哥</span>
       <span>X</span><span>U</span><span>L</span><span>G</span><span>R</span><span>.</span><span>C</span><span>O</span><span>M</span>
  </div>

  <div class="animate four">
    <span><i class="xulgricon-xg30">&#xe619;</i></span><span>雪</span><span>哥</span>
       <span>X</span><span>U</span><span>L</span><span>G</span><span>R</span><span>.</span><span>C</span><span>O</span><span>M</span>
  </div>

  <div class="animate five">
    <span><i class="xulgricon-xg30">&#xe619;</i></span><span>雪</span><span>哥</span>
       <span>X</span><span>U</span><span>L</span><span>G</span><span>R</span><span>.</span><span>C</span><span>O</span><span>M</span>
  </div>

  <div class="animate six">
    <span><i class="xulgricon-xg30">&#xe619;</i></span><span>雪</span><span>哥</span>
       <span>X</span><span>U</span><span>L</span><span>G</span><span>R</span><span>.</span><span>C</span><span>O</span><span>M</span>
  </div>

  <div class="animate seven">
    <span><i class="xulgricon-xg30">&#xe619;</i></span><span>雪</span><span>哥</span>
       <span>X</span><span>U</span><span>L</span><span>G</span><span>R</span><span>.</span><span>C</span><span>O</span><span>M</span>
  </div>