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; }
답변 1
스크립트 쓰시면 안될까요?
setTimeout 함수로 인트로에서만 딜레이주고 animation은 무한반복 하는거죠
텍스트 블러를 스크립트로 하려고 찾아봐도 못찾아서 css로만 하려고 했었습니다 ㅎㅁㅎ
답변 감사합니다.
