과제 CSS에 애니메이션 적용하기

@keyframes moving{
    from {
        padding-top: 100%;
        transform: rotate(720deg);
        
    }
    to {
        padding-top: 0%;
        transform: rotate(0deg);
    }
}
@keyframes rolling {
    from {
        left: 70px; /* 초기 위치: 부모 요소의 왼쪽 끝 */
        transform: rotate(0deg);
    }
    to {
        left: calc(100% - 120px); /* 최종 위치: 부모 요소의 너비에서 요소의 너비를 뺀 값만큼 이동 */
        transform: rotate(2880deg);
    }
}

#icon1 {
    animation: rolling 5s linear infinite alternate; 
    animation-delay: 4s;
}
#icon2 {
    animation: rolling 6s linear infinite alternate; 
    animation-delay: 4s;
}
#icon3 {
    animation: rolling 7s linear infinite alternate; 
    animation-delay: 4s;
}
#icon4 {
    animation: rolling 8s linear infinite alternate; 
    animation-delay: 4s;
}
* {
    margin: 0;
    padding: 0;
    animation-name: moving;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-direction: alternate;
}

 

 

 

 

 

 

 

 

http://hyeon9502.dothome.co.kr/

송윤섭의 홈페이지

 

 

스마트폰 모드에서는 작동하지 않게 함.