css animation keyframe 딜레이 포함 반복

안녕하세요. css animation관련 질문드립니다.

인트로 3초 뒤 텍스트 3개가 순서대로 나타났다 사라지는 효과인데요

인트로 > 텍스트1 > 텍스트2 > 텍스트3 > 텍스트1 > 텍스트2 > ...

이런식으로 계속 반복이 되게 하려고 합니다.

animation-iteration-count 를 사용하니 delay 적용이 안되서 

텍스트가 겹쳐서 반복이 되더라구요..

방법 아시는 분 계실까요..? 

.main-copy {

filter: blur(5px); -webkit-filter: blur(5px); opacity: 0; animation-name: titleAnimation1; animation-timing-function:ease; animation-duration: 3.8s; font-size: $font-size-125; font-weight: $font-weight-bold; letter-spacing: -1px; }

@keyframes titleAnimation1 {

0% {

opacity: 0;

-webkit-filter: blur(20px);

filter: blur(20px);

}

40% {

opacity: 1;

-webkit-filter: blur(0px);

filter: blur(0px);

}

70% {

opacity: 1;

-webkit-filter: blur(0px);

filter: blur(0px);

}

100% {

opacity: 0;

-webkit-filter: blur(20px);

filter: blur(20px);

}

}

.text-blur1 { animation-delay: 5s; }

.text-blur2 { animation-delay: 8s; }

.text-blur3 { animation-delay: 11s; }