CSSアニメーション

こんにちは。エムケーワイです。

先日、北海道、首都圏4都県、近畿3府県を除く全国39県で新型コロナウイルスによる緊急事態宣言が解除されました。

そして本日(2020年5月21日)近畿3府県でも解除されたことを受け、ちょっとしたCSSアニメーションを作りました。下の「緊急事態宣言」を「解除」してみてください。

いかがでしたでしょうか？

アニメーション開始のきっかけはjQueryで与えていますが、アニメーション自体はCSSのみで実現しています(と言うか今の私はそれしかできません^_^;)。

また、複数のアニメーションを開始時間をずらして連結しています。

初心者が作ったものなのでスキルのある方からすると大したことないとは思いますが、一応備忘録を残しておきます。

1. コンテンツの配置
2. jQuery作成
3. CSS設定
4. CSS、JSファイルの読み込み

1. コンテンツの配置

まずWordPressで表示するテキストやボタンを配置します。

1-1. テキストの配置

「緊急事態宣言」と「新生活様式」の2つのテキストをh2タグで配置します。

それぞれに下記のクラスを設定します。

• 緊急事態宣言：mkyBefore
• 新生活様式：mkyAfter

1-2. ボタンの配置

テキストの下に「解除」ボタンを配置します。

ブロックエディターでボタンを配置した場合、クリック後に非表示にすると下のコンテンツが上に移動して来たので、カスタムHTMLで配置しました。

<button class="mkyJsRemove">解除</button>

jQueryで使用するためにクラス”mkyJsRemove”を設定しています。

1-3. その他

1) スペーサ挿入

表示をブラウザで確認するとテキストとボタンが重なったので、テキストとボタンの間にスペーサを挿入しました。

また、スペーサの高さを、スマホ向けとPC向けで値を変える必要があったため、CSSファイルで設定できるようクラス”mkySpacer”を追加しました。

インラインでの高さ設定を削除したので、最終的にカスタムHTMLで記述することになりました。

2) コンテンツをdivタグで囲む

ここまでに配置したテキスト、スペーサ、”解除”ボタンをdivタグで囲み、divタグにクラス”mkyAnimeContent”を設定します。このコードもカスタムHTMLで記述しています。

1-4. HTMLコード

コンテンツの配置に関するHTMLコードは下記になります。

<div class="mkyAnimeContent">
    <h2 class="mkyBefore">緊急事態宣言</h2>
    <h2 class="mkyAfter">新生活様式</h2>
    <div aria-hidden="true" class="wp-block-spacer mkySpacer"></div>
    <button class="mkyJsRemove">解除</button>
</div><!-- mkyAnimeContent --> 

2. jQuery作成

次に”解除”ボタンのクリックでアニメーションを開始させるjQueryコードを作成します。

具体的な方法としては、他に思いつかなかったので、2つのテキストに”mkyAnimation”というクラスを追加することにしました。他の方法をご存じの方がいれば、教えていただけると嬉しいです( ´艸｀)

下記のコードを作成し、mkyAnimation.jsとして保存しました。

jQuery(function(){
    var _before = jQuery('.mkyBefore'),
    	_after = jQuery('.mkyAfter');
	
    jQuery('.mkyJsRemove').on('click',function(){
    	if (_before.hasClass('mkyAnimation') == false) {
    	    _before.addClass('mkyAnimation');
    	    _after.addClass('mkyAnimation');
            jQuery(this).fadeOut();
            return false;
        }
    });
});

「緊急事態宣言は一度だけでいい」という願いを込めて、一度しか操作できないよう”解除”ボタンを非表示にする処理も入れています^_^;

3. CSS設定

いよいよ肝心のCSS設定です。

下記に分けて書いていきます。

1. 全体設定
2. 「緊急事態宣言」に対する設定
3. 「新生活様式」に対する設定
4. 枠線の描画

3-1. 全体設定

1) 全体ブロックの設定

2つのテキストを同じ位置に配置する必要があるので、位置を”absolute”で設定できるようにします。このため、テキストと”解除”ボタンを含むブロックに”position: relative”を設定します。

div.mkyAnimeContent {
	position: relative;
}

2) テキストに対する共通設定

2つのテキストに対する共通設定は下記の通りです。

h2.mkyBefore, h2.mkyAfter {
    margin-top: 0;
    padding-top: 5px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    font-family: sans-serif;
    text-align: center;
    letter-spacing: .10rem;
    text-rendering: optimizeLegibility;
    font-size: 250%;
}

@media (min-width:700px) {
    h2.mkyBefore, h2.mkyAfter {
	padding-top: 10px;
	font-size: 400%;
    }
}

• “width”を100%として、親ブロックの幅と同じにしています。親ブロックはクラス”entry-content”直下に配置されているので、その幅は「Twenty Twenty見た目の修正」での設定に従います。
• “position”を”absolute”、”top”および”left”を共に0として、2つのテキストを同じ位置に配置しています。
• フォントはゴシック系の”sans-serif”、テキストは中央揃えとしています。
• フォントサイズはスマホ向けが250%、PC向けが400%に拡大しています。
• その他上パディング、文字間隔、テキスト描画の最適化方法等を指定しています。テキスト描画の最適化方法は、見やすいと言われている”optimizeLegibility”としています。

3) スペーサの設定

スペーサの高さはスマホ向け90px、PC向け140pxとしています。

.wp-block-spacer.mkySpacer {
    height: 90px;
}

@media (min-width:700px) {
    .wp-block-spacer.mkySpacer {
	height: 140px;
    }
}

3-2. 「緊急事態宣言」に対する設定

次はテキスト「緊急事態宣言」に対する設定です。

1) テキストの色、背景の設定

テキストの色、背景を下記のように設定しています。

.mkyBefore {
	color: yellow;
	background:rgba(50,50,50,.9);
}

色は緊急事態なので黄色にしました。

元々は”opacity”を使ってアニメーションで徐々に透明にしようとしていたのですが、”opacity”が0になると最後に表示する枠線が一部描画できなかったので、rgbaの透明度で調整することにしました。

これに伴い、背景色もグラデーションからべた塗に変更しました。グラデーションだと徐々に透明にならずに、途中で一気に透明になりました(“opacity”で透明にする場合は問題ありません)。

2) アニメーションの登録

テキスト「緊急事態宣言」に対しては、”vibration”と”disappear”の二つのアニメーションを登録しています。

.mkyBefore.mkyAnimation {
    animation: vibration 0.5s 6, disappear 8s 3s forwards;
    -webkit-animation: vibration 0.5s 6, disappear 8s 3s forwards;
}

“解除”ボタンのクリックによってクラス”mkyAnimation”が追加されるとアニメーション動作を開始します。

まず、”vibration”が3秒間(0.5s x 6)動作します。

3秒後からは”disappear”が8秒間動作します。最後の”forwards”により、アニメーションの最終状態が保持されます。

3) “vibration”の設定

“vibration”では「緊急事態宣言」が振動します。この動作は下記で実現しています。

@keyframes vibration {
    0% {
	transform: translate(0, 0);
	color: yellow;
    }
    25% {
	transform: translate(-5px, -5px);
	color: white;
    }
    50% {
	transform: translate(0, 0);
	color: yellow;
    }
    75% {
	transform: translate(5px, 5px);
	color: white;
    }
    100% {
	transform: translate(0, 0);
	color: yellow;
    }
}

“@-webkit-keyframes”の設定部分は同じ内容なので省略します(以下同様です)。

1回の動作で「緊急事態宣言」が原点 ⇒ 左上 ⇒ 原点 ⇒右下 ⇒ 原点に移動します。

原点では文字色が黄色ですが、左上と右下では文字色が白に変わります。

1回の動作は0.5秒で実行され、これが6回繰り返されます。

4) “disappear”の設定

“disappear”では「緊急事態宣言」が徐々に消えていきます。この動作は下記で実現しています。

@keyframes disappear {
    0% {
	background: rgba(50,50,50,.9);
	color: rgba(255, 255, 0, 1);
    }
    100% {
	background: rgba(50,50,50,0);
	color: rgba(255, 255, 0, 0);
    }
}

背景色、文字色をrgbaで指定し、最終状態では透明(a = 0)にしています。

3-3. 「新生活様式」に対する設定

次はテキスト「新生活様式」に対する設定です。

1) テキストの色、背景の設定

テキストの色、背景を下記のように設定しています。

.mkyAfter {
    opacity: 0;
    color: blue;
    text-shadow: 4px 4px 1px orange;
    background:linear-gradient(to right, rgba(0,255,255,.9), rgba(224,255,255,.9));
}

こちらは”opacity”を使います。初期状態は透明(0)です。

文字色は緊急事態宣言解除後なので青にし、オレンジの影をつけています(‘◇’)ゞ

“opacity”を使うので、「緊急事態宣言」の方では使えなかったグラデーションを背景に使っています。cyanからlightcyanへのグラデーションです。

2) アニメーションの登録

テキスト「新生活様式」に対しては、アニメーション”appear”を登録しています。

.mkyAfter.mkyAnimation {
    animation: appear 8s 7s forwards;
    -webkit-animation: appear 8s 7s forwards;
}

“解除”ボタンのクリックによってクラス”mkyAnimation”が追加され、7秒後(「緊急事態宣言」の”disappear”の中間時点)にアニメーション動作を開始します。

動作時間は8秒で、最後の”forwards”により、アニメーションの最終状態が保持されます。

3) “appear”の設定

“appear”では「新生活様式」が徐々に出現します。この動作は下記で実現しています。

@keyframes appear {
    0% {
	opacity: 0;
    }
    100% {
	opacity: 1;
    }
}

たったこれだけです。”opacity”を使うとずいぶん楽ですね！

3-4. 枠線の描画

テキスト「新生活様式」が出現すると、最後の仕上げとして枠線を描画します。下記の枠線が同時に描画されます。

• 左下 ⇒ 左上
• 左上 ⇒ 右上
• 右上 ⇒ 右下
• 右下 ⇒ 左下

1) 初期状態の設定

枠線の描画はテキスト「新生活様式」の枠線を描画しているわけではありません(その方法を私は知りません)。

「緊急事態宣言」、「新生活様式」の”::before”、”::after”に4本の枠線を割り当てています。4本描画することになるので、「新生活様式」の”::before”、”::after”だけでは足りず、「緊急事態宣言」の”::before”、”::after”も必要になります。

“opacity”を使って「緊急事態宣言」を透明にすると、その”::before”、”::after”に割り当てた枠線が描画されなくなるため、「緊急事態宣言」の透明化に”opacity”が使えなかったわけです。

枠線描画のための初期設定は下記のようになります。

.mkyBefore::before, .mkyBefore::after,
.mkyAfter::before, .mkyAfter::after {
    background-color: red;
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
}

/* LeftTop */
.mkyBefore::before {
    width: 0;
    height: 4px;
    left: -1px;
    top: -1px;
}
/* RightBottom */
.mkyBefore::after {
    width: 0;
    height: 4px;
    right: -1px;
    bottom: -1px;
}
/* LeftBottom */
.mkyAfter::before {
    width: 4px;
    height: 0;
    left: -1px;
    bottom: -1px;
}
/* RightTop */
.mkyAfter::after {
    width: 4px;
    height: 0;
    right: -1px;
    top: -1px;
}

• 共通設定としては”background-color”に赤を、”position”に”absolute”を、”z-index”に10を設定しています。
• 「緊急事態宣言」の”::before”に左上の始点を設定しています。
• 「緊急事態宣言」の”::after”に右下の始点を設定しています。
• 「新生活様式」の”::before”に左下の始点を設定しています。
• 「新生活様式」の”::after”に右上の始点を設定しています。
• 「緊急事態宣言」は横線、「新生活様式」は縦線担当です。
• 各線の初期状態は線幅4px、長さ0です。
• 各始点の位置を縦横1pxずつ外側にずらしています。

2) アニメーションの登録

「緊急事態宣言」の”::before”、”::after”には横線を描画する”drawLineH”を、「新生活様式」の”::before”、”::after”には横線を描画する”drawLineV”を登録しています。

.mkyAnimation.mkyBefore::before,
.mkyAnimation.mkyBefore::after {
    animation: drawLineH 500ms 15s forwards;
    -webkit-animation: drawLineH 500ms 15s forwards;
}

.mkyAnimation.mkyAfter::before,
.mkyAnimation.mkyAfter::after {
    animation: drawLineV 500ms 15s forwards;
    -webkit-animation: drawLineV 500ms 15s forwards;
}

“解除”ボタンのクリックによってクラス”mkyAnimation”が追加され、15秒後(「新生活様式」の”appear”の終了時点)にアニメーション動作を開始します。

動作時間は0.5秒で、最後の”forwards”により、アニメーションの最終状態が保持されます。

3) “drawLineH”、”drawLineV”の設定

4本の枠線が同時に描画されます。

@keyframes drawLineH {
    0% {
	width: 0;
    }
    100% {
	width: 100%;
    }
}

@keyframes drawLineV {
    0% {
	height: 0;
    }
    100% {
	height: 100%;
    }
}

処理としては、最終状態の線の長さをテキストの枠の幅と高さに合わせて100%とします。

“drawLineH”では”width”を、”drawLineV”では”height”を100%に設定しています。

以上のCSS設定をmkyAnimation.cssとして保存します。

4. CSS、JSファイルの読み込み

作成したmkyAnimation.css、mkyAnimation.jsを本ページにのみ読み込むようfunctions.phpに下記の処理を追加します。

    // mkyAnimation.css、mkyAnimation.js読み込み
    if ( is_single('post-200520') ) {
	wp_enqueue_style( 
	    'animation-style', 
	    get_stylesheet_directory_uri() . '/mkyAnimation.css', 
	    array(), 
	    filemtime( get_theme_file_path( 'mkyAnimation.css' ) )
	);
	wp_enqueue_script( 
	    'animation-script', 
	    get_stylesheet_directory_uri() . '/mkyAnimation.js', 
	    array(), 
	    filemtime( get_theme_file_path( 'mkyAnimation.js' ) ),
	    true
	);
    }

「ページの読み込みを高速化する」でも記載しましたが、is_single(‘slug’)でCSSファイル、JSファイルを読み込むページを特定します。本ページのスラッグは’post-200520’です。

mkyAnimation.jsは<head>タグ内ではなく、</body>の直前で読み込まれるよう、第5引数を”true”にしています。

以上、緊急事態宣言の解除(北海道と首都圏4都県はまだですが)を受けてCSSアニメーションを作ってみました。

緊急事態宣言が解除された地域にお住まいの皆様、そしてまだ解除されていない地域にお住まいの皆様、新型コロナ前の日常を取り戻せるのはまだまだ先になるかもしれません。「新生活様式」なるものの実践を心がけてまいりましょう！

今回もかなり長くなってしまいましたが、最後までお読みいただきありがとうございました。