CODEWITHSUNDEEP
csscss-animations
clankill3r
clankill3r

Reputation: 9543

Why does this not animate?

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/

Upvotes: 0

Views: 56

Answers (2)

Smerk
Smerk

Reputation: 91

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/

Upvotes: -1

Harry
Harry

Reputation: 89750

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>

Upvotes: 2

Related Questions