Почему это не оживляет?

Question

Я пытаюсь переместить фон, но кажется, что он застрял. Как его переместить?

body { 
 
    background-color: black !important; 
 
} 
 
#background_div { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    z-index: -1; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url("http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg"); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    animation-name: background_animation; 
 
} 
 
@keyframes background_animation { 
 
    0% { 
 
    transform: translate(0%, -100%) scale(4, 4); 
 
    } 
 
    25% { 
 
    transform: translate(100%, 0%) scale(5, 5); 
 
    } 
 
    50% { 
 
    transform: translate(50%, 100%) scale(6, 6); 
 
    } 
 
    100% { 
 
    transform: translate(0%, -100%) scale(4, 4); 
 
    } 
 
}

<div id="background_div"></div>

https://jsfiddle.net/5he2otzL/

Answer 1

Проблема в вашем случае состоит в том, что вы установили только animation-name в #background_div, но не задали какое-либо значение для animation-duration. Значение по умолчанию для animation-duration составляет 0s, а для animation-fill-mode - none. Итак, согласно spec, анимация не имеет видимого эффекта.

Ниже приведена выдержка из specs: (внимание мое).

Если < время> является 0s, как и исходное значение, ключевые кадры анимации не имеют никакого эффекта, но сама анимация еще происходит мгновенно. В частности, запускаются и заканчиваются события; если для режима анимации-заполнения задано обратное или оба, первый кадр анимации, определенный по направлению анимации, будет отображаться во время задержки анимации. Затем будет отображаться последний кадр анимации, определенный по типу анимации, если для режима анимации-заполнения задано переступление или и то, и другое. Если для режима анимации-заполнения установлено значение none, анимация не имеет видимого эффекта.

После того, как вы установили какое-то значение, отличное от 0s, до animation-duration, анимация работает нормально.

body { 
 
    background-color: black !important; 
 
} 
 
#background_div { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    z-index: -1; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url("http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg"); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    animation-name: background_animation; 
 
    animation-duration: 2s; /* set this */ 
 
} 
 
@keyframes background_animation { 
 
    0% { 
 
    transform: translate(0%, -100%) scale(4, 4); 
 
    } 
 
    25% { 
 
    transform: translate(100%, 0%) scale(5, 5); 
 
    } 
 
    50% { 
 
    transform: translate(50%, 100%) scale(6, 6); 
 
    } 
 
    100% { 
 
    transform: translate(0%, -100%) scale(4, 4); 
 
    } 
 
}

<div id="background_div"></div>

Answer 2

body { 
     background-color: black !important; 
} 

#background_div { 
     position: absolute; 
     left: 0; 
     top: 0; 
     bottom: 0; 
     right: 0; 
     z-index: -1; 
     width: 100%; 
     height: 100%; 
    background-image: url("http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg"); 
    background-position: center; 
    background-repeat: no-repeat; 
-webkit-animation: background_animation 5s infinite; /* Chrome, Safari, Opera */ 
    animation: background_animation 5s infinite; 

} 


@keyframes background_animation { 
    0% { 
     transform: translate(0%,-100%) scale(4,4); 
    } 
    25% { 
     transform: translate(100%,0%) scale(5,5); 
    } 
    50% { 
     transform: translate(50%,100%) scale(6,6); 
    } 
    100% { 
     transform: translate(0%,-100%) scale(4,4); 
    } 
} 

Fixed это для вас надеюсь, что это помогает,

Легко читает: http://www.w3schools.com/cssref/css3_pr_animation.asp

https://jsfiddle.net/5he2otzL/