CSS를 사용하여 배경 이미지 확대/축소

Question

배경 이미지로 애니메이션을 만들려고하고 있습니다. 하지만 제 애니메이션이 부드럽게 움직이지 않습니다. 애니메이션을 30s에서 5s으로 줄이면 애니메이션이 부드럽지만 애니메이션이 너무 빠릅니다.

내 CSS : 여기

body { 
    height: 100%; 
    width: 100%; 
    background: url('https://static.pexels.com/photos/3768/sky-sunny-clouds-cloudy.jpg') center center no-repeat; 
    background-size: cover; 
    background-position-y: 0; 
    animation: grow 30s linear infinite; 
} 

@keyframes grow { 
    0% { background-size: 100% auto; } 
    50% { background-size: 140% auto; } 
    100% { background-size: 100% auto; } 
} 

확인 결과 https://jsfiddle.net/6q3obw82/

Answer 1

더 중단 점

에게

@keyframes grow { 
    0% { background-size: 100% auto; } 
    25% { background-size: 150% auto; } 
    50% { background-size: 200% auto; } 
    75% { background-size: 150% auto; } 
    100% { background-size: 100% auto; } 
} 

Jsfiddle 링크를 추가하는 코드에 대한 키 프레임을 변경해보십시오 : https://jsfiddle.net/xgjmesrr/