큰 이미지의 보여지는 위치가 바뀌는 애니메이션

See the Pen 이미지 위치 변경 by nilgi (@nilgi) on CodePen.

 

object-fit: cover; // 비율을 유지하고 컨테이너보다 콘텐츠가 크면 잘린다.
object-position: 0% 0%; // 콘텐츠가 보여지는 위치의 시작점 x% y%
animation: op 6s infinite; // 애니메이션 이름은 op며 6초간 진행되고 반복

@keyframes op { // 애니메이션 op의 키프레임 지정
    0% {
        object-position: 0% 0%; // 6초중 0% 지점에서 콘텐츠의 위는 0% 0%
    }
    25% {
        object-position: 25% 0%;
    }
    50% {
        object-position: 50% 0%; // 6초중 50% 지점에서 콘텐츠의 위는 50% 0%
    }
    75% {
        object-position: 75% 0%;
    }
    100% {
        object-position: 100% 0%; // 6초중 100% 지점에서 콘텐츠의 위는 100% 0%
    }
}