css animation keyframe 딜레이 포함 반복

css animation keyframe 딜레이 포함 반복

QA

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은 무한반복 하는거죠

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT