タイポグラフィとまではいかないですが、テキストにグラデーションを、さらにちょっとしたアニメーションを加えたい場合のサンプルです。

今回はJavaScriptを使わず、CSSのanimationのみで動きを加えます。

動作サンプルページ

実際のアニメーションサンプルはこちら。

ベースHTML・CSS

<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">

それっぽくGoogle Fontsを使っています。

<div class="movie-wrap bg-black">
  <span class="type-01">Typograpy Animation</span>
</div>

.movie-wrap {
  width: 100%;
  box-sizing: border-box;
  padding: 90px 1em;
  text-align: center;
}

.bg-black {
  background: #1b1b1b;
}

サンプル01

background-positionを上下に変更することで、グラデーションの位置を変更しています。

CSS

.type-01 {
  position: absolute;
  width: 100%;
  left: 0;
  font-family: 'Anton', sans-serif;
  font-size: 1.75em;
  background: -webkit-linear-gradient(top, #035c8c 0%, #1b1b1b 70%);
  background-size: 100% 200%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: type01Ani 1.5s ease 0s infinite alternate;
}

@keyframes type01Ani {
  0% {
    transform: translate(0, 0);
    background-position: 0 100%;
  }
  100% {
    transform: translate(0, -45%);
    background-position: 0 0;
  }
}

サンプル02

サンプル01の反転版。雰囲気が変わります。

CSS

.type-02 {
  position: absolute;
  width: 100%;
  left: 0;
  font-family: 'Anton', sans-serif;
  font-size: 1.75em;
  background: -webkit-linear-gradient(top, #035c8c 0%, white 70%);
  background-size: 100% 200%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: type02Ani 1.5s ease 0s infinite alternate;
}

@keyframes type02Ani {
  0% {
    transform: translate(0, 0);
    background-position: 0 100%;
  }
  100% {
    transform: translate(0, -45%);
    background-position: 0 0;
  }
}

サンプル03

もちろんbackground-positionを左右に変更すれば、横移動のアニメーションになります。

CSS

.type-03 {
  position: absolute;
  width: 100%;
  left: 0;
  font-family: 'Anton', sans-serif;
  font-size: 1.75em;
  background: -webkit-linear-gradient(left, white 0%, #035c8c 70%);
  background-size: 300% 100%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: type03Ani 1.5s ease 0s infinite alternate;
}

@keyframes type03Ani {
  0% {
    transform: translate(0, 0);
    background-position: 100% 0;
  }
  100% {
    transform: translate(-45%, 0);
    background-position: 0 0;
  }
}

サンプル04

消える風に見せていましたが、グラデーションなのでカラーは自由です。

CSS

.type-04 {
  position: absolute;
  width: 100%;
  left: 0;
  font-family: 'Anton', sans-serif;
  font-size: 1.75em;
  background: -webkit-linear-gradient(top, #035c8c 0%, #E4A972 70%);
  background-size: 100% 200%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: type04Ani 1.5s ease 0s infinite alternate;
}

@keyframes type04Ani {
  0% {
    transform: translate(0, 0);
    background-position: 0 100%;
  }
  100% {
    transform: translate(0, -45%);
    background-position: 0 0;
  }
}