CSSだけで作るRevealAnimation

テキストや画像が下から出てくるRevealAnimationの作り方を紹介します。
全体の流れは以下の通りです。
①ページを表すると、ロゴ画像下から出てくる
②数秒後、ロゴ画像が消えて背景全体に画像などがフェードインで現れる

右上の「EDIT ON CODEPEN」のロゴをクリックすると、記事に埋め込まれているコードが画面いっぱいに表示されるページに遷移します。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="KKqzWow" data-user="lvn_HO" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/lvn_HO/pen/KKqzWow">
  </a> by haruyosih (<a href="https://codepen.io/lvn_HO">@lvn_HO</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
アニメーションは3か所に設定します。
①テキストを上に移動する
②テキストをフェードアウトで非表示にする
③背景のグラデーションがフェードインする
##手順
###1）テキスト設置
CORPORATION.incというテキスト`<span class="moveup">CORPORATION.inc</span>`を用意します。
###2）テキストを隠すブロックを定義
1）の、`<span class="moveup">CORPORATION.inc</span>`は、画面を読み込んだ時点では、表示されないように設定しておくために、テキストの上に背景色と同色（#fff）のブロック（疑似要素after で定義）を作って、テキストの上にかぶせておきます。
そのため、`<span class="moveup">CORPORATION.inc</span>`を更に`<div class="text">～</div>`で囲んで、疑似要素afterでボックスを作って、文字が隠れるようにボックスを指定しておきます。

```css
.text::after {
		display: inline-block;
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 590px;
		height: 120px;
		background: #fff;
	}
```
![アートボード 2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/9aa32018-f647-021b-a55c-bda022c1a504.gif)

###3）テキストが上にせりあがってくる動きを設定
上にせりあがってくるテキスト部分は
`<span class="moveup">CORPORATION.inc</span>`で、以下のようにcssでアニメーションを設定します。

```css
.text .moveup {
	animation: moveupText ease-out;
 	animation-iteration-count: 1;
 	transform-origin: left bottom;
 	animation-fill-mode: forwards;
 	position: absolute;
 	animation-delay: 2s;
	animation-duration: 2s;
	opacity: 0; 　/* 読みこまれるまでは非表示 */
}
@keyframes moveupText {
		0% {
			transform:  translate(0px,0px) ;
			opacity: 1;
		}
		70% {
			transform:  translate(0px,0px) ;
			opacity: 1;
		}
		100% {
			transform:  translate(0px,-100px) ;
			opacity: 1;
			}
	}
```

.text .moveup（テキスト部分）にmoveupTextというアニメーション名を定義し、`@keyframes`で動きを指定します。このように設定するとページを読み込んだ2秒後に、2秒かけて100px上に移動します。
白いボックスの下に隠れていたテキストが、上に100px移動することで表示されます。

![アートボード 1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1555848/7c83eebd-8ed7-ea3c-c173-c95df4031e5e.gif)


###4）文字部分をフェードアウトさせる
テキストが表示された後は
`<div class="text"><span class="moveup">CORPORATION.inc</span></div>`
をフェードアウトで非表示にします。
このテキスト部分にfedeOutTxtというアニメーション名を命名し、ページ読み込んだ10秒後に、2秒かけて非表示`cssopacity: 0;`にします。

```css
.text {
		animation: fedeOutTxt;
		animation-duration: 2s;
		animation-delay: 10s;
		animation-fill-mode: forwards;
	}
@keyframes fedeOutTxt {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		}
	}
```
文字部分`<span class="moveup">CORPORATION.inc</span>`だけでなく、`.text::after`を含んだ`<div class="text"><span class="moveup">CORPORATION.inc</span></div>``も非表示にしないと、この後に表示させる背景グラデーションに、白いボックスが浮かんだ状態が表示されてしまいます。

###5）背景をフェードインさせる
テキスト部分を非表示にしたら、背景のグラデーションをフェードインで表示させます。
背景色全体に`<div class="bgAnimation">`にbgGradientというアニメーション名を定義しておき、
12秒後に15秒かけてフェードインでグラデーション背景を表示する指定をします。

```css
.bgAnimation {
		animation-name: bgGradient ;
		animation-duration: 15s;
		animation-delay: 12s;
	}
@keyframes bgGradient {
		0% {
		background-image: linear-gradient( 135deg, #71d8f7 10%, #edf771 100%);
		opacity: 0;
		}
		100% {
		background-image: linear-gradient( 135deg, #71d8f7 10%, #edf771 100%);
		opacity: 1;
		}
	}
```
0%の時点では非表示（`opaciity:0`）の状態で、15秒かけてフェードイン表示（`opacity: 1;`）させます。

.bgAnimationに

```css
background-image: linear-gradient( 135deg, #71d8f7 10%, #edf771 100%);
```
を指定してしまうと、はじめからグラデーションが表示されてしまうので、bgAnimationでグラデーションを指定するのではなく、`＠keyframe`の部分で指定するのがいいと思います。
今回は背景にグラデーションを指定しましたが、全面にイメージ画像や動画を表示させるパターンもいいと思います。

例えばコーポレートサイトなどで使用すれば
　①空白から会社ロゴが出て数秒表示され
　②ロゴが消え、社内の仕事風景などの動画を全面表示
させることによりより、ロゴと社内の風景をより印象付けることができ、コーポレートサイトでのブランディングに効果的な表現ができるのではないかと思います。