Question

我正在尝试移动背景，但似乎很困难。我该怎么办呢？

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

https://jsfiddle.net/5he2otzL/

Answer 1

您的问题是，您只设置了animation-name到#background_div，但没有为animation-duration设置任何值。 animation-duration的默认值为0s，animation-fill-mode的默认值为none。因此，根据spec，动画没有明显效果。

以下是specs的摘录:(重点是我的）。

如果＆lt; time＆gt;是0，与初始值一样，动画的关键帧没有效果 ，但动画本身仍然是瞬间发生的。具体来说，开始和结束事件被触发;如果动画填充模式设置为向后或两者，动画的第一帧（由动画方向定义）将在动画延迟期间显示。然后，如果动画填充模式设置为向前或两者，则将显示动画的最后一帧（由动画方向定义）。 如果动画填充模式设置为无，则动画无效果 。

一旦将0以外的值设置为animation-duration属性，动画就可以正常工作。

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

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);
    }
}

修正了它，希望它有所帮助，

易读： http://www.w3schools.com/cssref/css3_pr_animation.asp

https://jsfiddle.net/5he2otzL/

为什么这不是动画？

2 个答案: