流れる文字のCSSアニメーションサンプル集

2019-08-302020-01-14CSS アニメーションサンプル集,CSS

CSSだけで流れる文字を作成するCSSアニメーションサンプルパターン集になります。

共通HTML

<div><p class="text">流れる文字のCSSアニメーション</p></div>

1. 右から左へ流れる文字のCSSアニメーションサンプル
2. 左から右へ流れる文字のCSSアニメーションサンプル
3. 上から下へ流れる文字のCSSアニメーションサンプル
4. 上から下へ流れる文字のCSSアニメーションサンプル

右から左へ流れる文字のCSSアニメーションサンプル

右から左へ文字が流れるシンプルなCSSアニメーションサンプルです。

動作サンプル

See the Pen CSS Flowing Text Animation by yochans (@yochans) on CodePen.

サンプルコード

div{
  background:#01579B;
  width:100%;
  overflow: hidden;
}

.text{
  font-size:2em;
  color:#FFF;
  animation: flowing 10s linear infinite;
  transform: translateX(100%);/*初期位置*/
}


@keyframes flowing {
  100% {
    transform: translateX(-100%);
  }
}

コードの説明

親になる要素にはoverflow: hidden;を指定してはみ出る部分を非表示にしています。

transform: translateX(100%);を指定して、要素の初期位置を右側いっぱいにしています。
始点が左になるので、初期位置を右側いっぱいにすることで表示時は文字はコンテンツから見えなくしています。

アニメーション@keyframesを利用して、指定時間（サンプルでは10秒）かけて移動させています。

animation:の内容は、キーフレーム名、アニメーション時間、アニメーションタイプ、連続性の指定となっています。（infiniteで無限ループ）

左から右へ流れる文字のCSSアニメーションサンプル

左から右へ文字が流れるシンプルなCSSアニメーションサンプルです。

動作サンプル

See the Pen CSS Flowing Text Animation2 by yochans (@yochans) on CodePen.

サンプルコード

div{
  background:#01579B;
  width:100%;
  overflow: hidden;
}

.text{
  font-size:2em;
  color:#FFF;
  animation: flowing 10s linear infinite;
}


@keyframes flowing {
  100% {
    transform: translateX(100%);
  }
}

コードの説明

親になる要素にはoverflow: hidden;を指定してはみ出る部分を非表示にしています。

始点が標準の場所であれば、改めて初期値を設定する必要はありません。

アニメーション@keyframesにて、要素のX座標を100％プラス値側に移動させています。

サンプルではアニメーション@keyframesを利用して、指定時間（サンプルでは10秒）かけて移動させています。

animation:の内容は、キーフレーム名、アニメーション時間、アニメーションタイプ、連続性の指定となっています。（infiniteで無限ループ）

上から下へ流れる文字のCSSアニメーションサンプル

上から下へ文字が流れるシンプルなCSSアニメーションサンプルです。

動作サンプル

See the Pen CSS Flowing Text Animation3 by yochans (@yochans) on CodePen.

サンプルコード

div{
  background:#01579B;
  width:100%;
  height:200px;
  overflow: hidden;
}

.text{
  font-size:2em;
  color:#FFF;
  animation: flowing 5s linear infinite;
  transform: translateY(-100%);/*初期位置*/
}


@keyframes flowing {
  100% {
    transform: translateY(250px);
  }
}

コードの説明

親になる要素には高さを指定します。
またoverflow: hidden;を指定してはみ出る部分を非表示にしています。

始点が標準の場所であれば、改めて初期値を設定する必要はありません。

サンプルでは初期位置を100％要素の上側に指定しています。
※この場合の100％は要素のサイズになります。

アニメーション@keyframesにて、要素のY座標を100％プラス値側に移動させています。

サンプルではアニメーション@keyframesを利用して、指定時間（サンプルでは10秒）かけて移動させています。

animation:の内容は、キーフレーム名、アニメーション時間、アニメーションタイプ、連続性の指定となっています。（infiniteで無限ループ）

Y軸の移動の場合は、親要素の高さに合わせて初期値、移動距離、アニメーション時間を調節します。

上から下へ流れる文字のCSSアニメーションサンプル

上から下へ文字が流れるシンプルなCSSアニメーションサンプルです。

動作サンプル

See the Pen CSS Flowing Text Animation4 by yochans (@yochans) on CodePen.

サンプルコード

div{
  background:#01579B;
  width:100%;
  height:200px;
  overflow: hidden;
}

.text{
  font-size:2em;
  color:#FFF;
  animation: flowing 5s linear infinite;
  transform: translateY(200px);/*初期位置*/
}


@keyframes flowing {
  100% {
    transform: translateY(-200px);
  }
}