flyLabel.js

Classic

Favorite Power Ranger

.classic {
  opacity: 0;
  top: 2em;
  z-index: -1;
}
.classic.is-active {
  opacity: 1;
  top: 1em;
  z-index: 1;
}

Drop

First Name

.drop {
  opacity: 0;
  text-shadow: 0 0 25px blue;
  transform: scale(11);
  z-index: -1;
}
.drop.is-active {
  opacity: 1;
  text-shadow: 0 0 0 blue;
  transform: scale(1);
  z-index: 1;
}

From Right

Last Name

.from-right {
  left: 5em;
  opacity: 0;
}
.from-right.is-active {
  left: 0%;
  opacity: 1;
}

Jiggle

Favorite Color

.jiggle.is-active {
  animation: JIGGLE .3s ease;
  animation-iteration-count: 3;
}

Select

Secret Number

.classic {
  opacity: 0;
  top: 2em;
  z-index: -1;
}
.classic.is-active {
  opacity: 1;
  top: 1em;
  z-index: 1;
}

适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

来源：站长素材