css 에니메이션 @keyframe 질문드립니다.

css 에니메이션 @keyframe 질문드립니다.

QA

css 에니메이션 @keyframe 질문드립니다.

본문

날아다니는새 css 에니메이션을 구현하기위해 한소스를 찾아서 적용시키는 중이었는데요

@keyframes fly-right-one {
    
    0% {
        transform: scale(0.3) translateX(-10vw);
    }
    
    10% {
        transform: translateY(2vh) translateX(10vw) scale(0.4);
    }
    
    20% {
        transform: translateY(0vh) translateX(30vw) scale(0.5);
    }
    
    30% {
        transform: translateY(4vh) translateX(50vw) scale(0.6);
    }
    
    40% {
        transform: translateY(2vh) translateX(70vw) scale(0.6);
    }
    
    50% {
        transform: translateY(0vh) translateX(90vw) scale(0.6);
    }
    
    60% {
        transform: translateY(0vh) translateX(110vw) scale(0.6);
    }
    
    100% {
        transform: translateY(0vh) translateX(110vw) scale(0.6);
    }
    
}
해당부분을 작성하면 첫번째 0%부분만 활성화가 되고 나머지 10~100%까지 작성했던 부분이 무시가 됩니다.

혹시 다른방식으로 작성을 해야하는건지 방법알려주시면 감사합니다.

이 질문에 댓글 쓰기 :

답변 1

특별하게 문제될 건 없을 거 같은데요 이 소스상에선

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

회원로그인

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