애니메이션, 트랜지션

애니메이션, 트랜지션

QA

애니메이션, 트랜지션

본문

http://www.ptk4u.com/en/

 

위 사이트 메인배너의 텍스트 애니메이션을 똑 같이 구현하려면 animation로 하는게 낫나요? 아님 transition 으로 하는것이 낫나요?

 

@keyframes up1 {

    0% { transform:translateY(20px); opacity:0; }

    10% { transform:none; opacity:1 }

    90% { transform:none; opacity:1 }

    100% { transform:translateY(20px); opacity:0 }

    

 

animation:up1; opacity:0; animation-duration:9s;  animation-iteration-count: infinite; animation-direction: alternate;animation-fill-mode: forwards;

 

 

배너 이미지는 9초마다 바뀌게 했습니다. 위 처럼 텍스트에 적용하니, 배너 바뀔때마다(9초 다되가서) 사라진 글자가 다시 잠깐 보이네요.

어떻게 해야 제일 비슷할까요?

혹시 transition 으로 하려면 어떻게 해야 할까요?

이 질문에 댓글 쓰기 :

답변 2

예시 사이트는 트랜지션으로 했네요

 

요소보기로 css를 참고하셔서 비슷하게 따라하시는게 가장 근접해보입니다

블랑숑님 말씀처럼 레퍼런스 사이트의 css 코드가 trasform 으로 되어있네요

@Keyframe 으로 제어하는게 제 개인적으론 animation 보단 편하더라구요

답변을 작성하시기 전에 로그인 해주세요.
전체 1,178
QA 내용 검색

회원로그인

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