이미지 위치변경 애니메이션

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

 

.op {
    width: 200px;
    height: 400px;
    object-fit: cover; / 비율을 유지하고 박스보다 콘텐츠가 크면 잘린다.
    object-position: 0% 0%; / 콘텐츠 위지 저정 x% y%
    animation: op 6s infinite;
}
@keyframes op {
    0% {
        object-position: 0% 0%;
    }
    25% {
        object-position: 25% 0%;
    }
    50% {
        object-position: 50% 0%;
    }
    75% {
        object-position: 75% 0%;
    }
    100% {
        object-position: 100% 0%;
    }
}