CSSアニメーション例
颯爽と登場してセリフ

おおかみしょうねんは

なぜさいごのさいごに

タモリがきたぞ！みたいな

うそをつかなかったのか

※この画像はマッハドッターbraveさんの作品です。

CSSアニメーション例

アニメーション概要

背景透過画像がスライドするように登場し、セリフx4を順次表示しています。

右からの登場はleftプロパティの値で調整しています。

セリフのふきだしは、opacityを1にするタイミングをそれぞれズラしています。

すべての要素のアニメーションの時間（animation-duration）を統一することで、異なる要素間でタイミングをあわせやすくなります。

CSS

@keyframes coming {
  0% {
    left: 1500px;
  }
  10% {
    left: 0px;
  }
  92% {
    left: 0px;
  }
  100% {
    left: -1500px;
  }
}

#nb1 {
  animation-name: coming;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


@keyframes script1 {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 0;
  }
  19% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

#script1 {
  animation-name: script1;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


@keyframes script2 {
  0% {
    opacity: 0;
  }
  36% {
    opacity: 0;
  }
  37% {
    opacity: 1;
  }
  51% {
    opacity: 1;
  }
  52% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

#script2 {
  animation-name: script2;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


@keyframes script3 {
  0% {
    opacity: 0;
  }
  54% {
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  69% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

#script3 {
  animation-name: script3;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


@keyframes script4 {
  0% {
    opacity: 0;
  }
  72% {
    opacity: 0;
  }
  73% {
    opacity: 1;
  }
  87% {
    opacity: 1;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

#script4 {
  animation-name: script4;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}