CSS3 – テキストを波のようにゆらゆらと上下に動かすアニメーション

CSS3を使った、テキストを波のようになめらかに動かすアニメーションです。

概要
HTML
CSS
JS

概要

Webページで h タグなどの見出しにも使えるよう、通常のテキストを1文字ずつ span タグで囲った文字に変換し、それらをインラインブロック要素としてそれぞれアニメーションさせています。
テキストの変換は jQuery の replaceメソッドを使っています。

実際に作成したデモのHTML、CSS、JS の3つのファイルで説明します。

See the Pen
テキストを波のように動かす by J. (@umvjcqzk)
on CodePen.

HTML

デモの demo.html の中身です。
headタグ内で demo.css を読み込み、bodyタグ内の最後にjQueryと demo.js を読み込んでいます。
bodyタグ内のコンテンツは p タグのテキストのみです。

HTML

<!doctype html>
<html lang="ja">
<!-- headタグ部↓ -->
<head>
<meta name="robots" content="noindex">
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<!-- headタグ部↑ -->
<body>
<p>川の流れのように</p>
<!-- スクリプト読み込み部↓ -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js?ver=1.4.1'></script>
<script src='demo.js'></script>
<!-- スクリプト読み込み部↑ -->
</body>
</html>

CSS

デモの demo.css の中身です。

CSS

@charset "UTF-8";

/*** アニメーションの定義 ***/
@keyframes textWave {
 0% {
 top: 0;
 }
 100% {
 top: -0.25em; /* top位置を4分の1上げる */
 }
}
/*** フォント設定 ***/
p span {
font-size: 200%;
color: #29a2d4;
display: inline-block; /* インラインブロック要素とする */
position: relative; /* 相対位置とする */
}
p span {
animation-name: textWave;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite; /* 無限に繰り返す */
animation-direction: alternate; /* 再生・逆再生を繰り返す */
}
p span:nth-of-type(2) {
animation-delay: 0.5s; /* アニメーション開始までの遅延（以下、同じく） */
}
p span:nth-of-type(3) {
animation-delay: 1s;
}
p span:nth-of-type(4) {
animation-delay: 1.5s;
}
p span:nth-of-type(5) {
animation-delay: 2s;
}
p span:nth-of-type(6) {
animation-delay: 2.5s;
}
p span:nth-of-type(7) {
animation-delay: 3s;
}
p span:nth-of-type(8) {
animation-delay: 3.5s;
}

JS

demo.js には下記のコードが書かれています。

jQuery

//テキストの一文字ずつを span 囲みに置き換える
$('p').each(function(){
  var txt= $(this).html();
  $(this).html(txt.replace("川の流れのように","<span>川</span><span>の</span><span>流</span><span>れ</span><span>の</span><span>よ</span><span>う</span><span>に</span>")
    );
});

以上、ご参考になれば幸いです。