질문

내 배경 이미지로 애니메이션을 만들려고하는데 그럴 수 있습니다. 하지만 내 애니메이션이 원활하게 실행되지 않습니다. 애니메이션을 30 초 에서 5 초 로 줄이면 원활하게 실행되지만 애니메이션이 너무 빠릅니다.

내 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/

답변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; }
}