@charset "UTF-8";
/*transition: 
transition-propertyの値 
transition-durationの値 
transition-delayの値 
transition-timing-functionの値;
transition: all 0.5s 0s ease;
*/
/*
animation-name：
アニメーション名。keyframesで指定するか既定のアニメーション名を指定。初期値はnone
animation-duration：
1回のアニメーションが完了するまでの時間。初期値は0s
animation-timing-function：
アニメーションの進行。初期値はease
animation-delay：
アニメーションを開始するまでの時間。初期値は0s
animation-iteration-count：
アニメーションを繰り返す数。初期値は1
animation-direction：
アニメーションの方向。初期値はnormal
animation-fill-mode：
アニメーションの実行の前後のスタイルを指定。初期値はnone
animation-play-state：
アニメーションが実行中か停止中かを指定。初期値はrunning
*/
.copy0 {
  animation-name: copy0;
  animation-duration: 15s;
  animation-delay: 0s;
  animation-fill-mode: both;
  animation-iteration-count: forwards;
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
.copy{
opacity: 0;
  animation-name: copy1;
  animation-duration: 10s;
  animation-fill-mode: both;
  animation-iteration-count: forwards;

}
 .copy:nth-of-type(1) {
   animation-delay: 3s;
  }
 .copy:nth-of-type(2) {
    animation-delay: 13s;
  }
.copy:nth-of-type(3) {
    animation-delay: 23s;
  }

@keyframes copy1 {
  
  10% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}