時間差で（数秒ずつずらしながら）テキストを順番に出現させるテクニック

記事タイトルの通り。

トップページのメイン画像部分などでしばしば利用されるテクニックだ。
筆者も、「スライドショーを取り入れるほど有効な写真（画像）が複数あるわけではないが、1枚の背景写真をバックに多少のエフェクトをつけたい」という場合に取り入れている。

実装方法

jQuery

まずはjQueryに以下のように記述する。

$(window).on('load',function(){
 $(function(){
  setTimeout(function(){
   $('.anime-catchcopy').addClass('active');
  },1000);
 });
});

読み込み完了時から数えて、setTimeoutで1秒遅らせて、「active」classを付与している。
1つめの文字が出現するまで1秒かかると解釈してほしい。

HTML

<div class="anime-catchcopy">
 <p class="copy-1">下からほわ〜んと出現！</p>
 <p class="copy-2">その0.5秒後に左からほわ〜んと出現！</p>
 <p class="copy-3">その0.5秒後に右からほわ〜んと出現！</p>
</div>

CSS

最後に肝心のCSS。

.anime-catchcopy .copy-1,
.anime-catchcopy .copy-2,
.anime-catchcopy .copy-3 {
 opacity: 0;
}
.anime-catchcopy.active .copy-1 {
 -webkit-animation-name: copyFade1;
 animation-name: copyFade1;
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-timing-function: ease;
 animation-timing-function: ease;
 -webkit-animation-delay: 0s;
 animation-delay: 0s;
 -webkit-animation-iteration-count: 1;
 animation-iteration-count: 1;
 -webkit-animation-direction: normal;
 animation-direction: normal;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
 -webkit-animation-play-state: running;
 animation-play-state: running;
}
.anime-catchcopy.active .copy-2 {
 -webkit-animation-name: copyFade2;
 animation-name: copyFade2;
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-timing-function: ease;
 animation-timing-function: ease;
 -webkit-animation-delay: 0.5s;
 animation-delay: 0.5s;
 -webkit-animation-iteration-count: 1;
 animation-iteration-count: 1;
 -webkit-animation-direction: normal;
 animation-direction: normal;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
 -webkit-animation-play-state: running;
 animation-play-state: running;
}
.anime-catchcopy.active .copy-3 {
 -webkit-animation-name: copyFade3;
 animation-name: copyFade3;
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-timing-function: ease;
 animation-timing-function: ease;
 -webkit-animation-delay: 1s;
 animation-delay: 1s;
 -webkit-animation-iteration-count: 1;
 animation-iteration-count: 1;
 -webkit-animation-direction: normal;
 animation-direction: normal;
 -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
 -webkit-animation-play-state: running;
 animation-play-state: running;
}

@keyframes copyFade1 {
 0% {
  opacity: 0;
  -webkit-transform:translateY(20px);
  transform:translateY(20px)
 }
 100% {
  opacity: 1;
  -webkit-transform:translateY(0px);
  transform:translateY(0px)
 }
}
@keyframes copyFade2 {
 0% {
  opacity: 0;
  -webkit-transform:translateX(-40px);
  transform:translateX(-40px)
 }
 100% {
  opacity: 1;
  -webkit-transform:translateY(0px);
  transform:translateY(0px)
 }
}
@keyframes copyFade3 {
 0% {
  opacity: 0;
  -webkit-transform:translateX(40px);
  transform:translateX(40px)
 }
 100% {
  opacity: 1;
  -webkit-transform:translateY(0px);
  transform:translateY(0px)
 }
}