Why does this not animate? - css

Question

I am trying to move a background but it seems quite stuck.
How can I move it?
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

The problem in your case is that you've set only the animation-name to #background_div but have not set any value for the animation-duration. The default value for animation-duration is 0s and that for the animation-fill-mode is none. So, as per the spec, the animation has no visible effect.
Below is the extract from the specs: (emphasis is mine).
If the <time> is 0s, like the initial value, the keyframes of the animation have no effect, but the animation itself still occurs instantaneously. Specifically, start and end events are fired; if animation-fill-mode is set to backwards or both, the first frame of the animation, as defined by animation-direction, will be displayed during the animation-delay. Then the last frame of the animation, as defined by animation-direction, will be displayed if animation-fill-mode is set to forwards or both. If animation-fill-mode is set to none then the animation has no visible effect.
Once you set some value other than 0s to animation-duration property, the animation works fine.
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 it for you hope it helps,
Easy reads:
http://www.w3schools.com/cssref/css3_pr_animation.asp
https://jsfiddle.net/5he2otzL/