[CSS] background-image 크기 transition 주는법

background-size transition animation

CSS에서 background 이미지에 마우스를 올려 hover 효과를 주고 싶을 때가 있습니다. 보통은 transform: scale(1.1)처럼 사용하게 되면 transition효과가 적용되어 자연스럽게 커지는 효과를 받을 수 있지만, transform scale이 적용되지 않은 경우가 종종 있습니다.

Solve

우선 이미지의 background size는 cover이나 다른 형태가 아닌 반드시 100%로 적용해줘야 합니다.

그리고 이 안에 transition을 넣어주면 되는데 단순히 tramsition: .3s ease; 식으로 넣으면 정상적으로 적용되지 않습니다.그렇기 때문에 transition: background-size .3s ease; 처럼 background-size를 안에 넣어줘야 합니다.
이제, hover에도 background-size를 퍼센트 형식으로 넣어주기만 하면 됩니다.

.image {
    width: 200px;
    height: 200px;
    background: url(https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80) no-repeat center;
    background-size: 100%;
    transition: background-size .3s ease;
    -moz-transition: background-size .3s ease;
    -web-kit-transition: background-size .3s ease;
}
.image:hover {
    background-size: 110%;
}