使用CSS3动画改变背景图像 [英] Changing Background Image with CSS3 Animations

问题描述

为什么这不工作？我做错了什么？

Why this isn't working? What am I doing wrong?

CSS

@-webkit-keyframes test {
  0% {
    background-image: url('frame-01.png');
  }
  20% {
    background-image: url('frame-02.png');
  }
  40% {
    background-image: url('frame-03.png');
  }
  60% {
    background-image: url('frame-04.png');
  }
  80% {
    background-image: url('frame-05.png');
  }
  100% {
    background-image: url('frame-06.png');
  }
}

div {
  float: left;
  width: 200px;
  height: 200px;
  -webkit-animation-name: test;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: 2;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: linear;
}

DEMO

http://jsfiddle.net/hAGKv/

提前感谢！

推荐答案

背景图片不是可以动画的属性 - 属性。

Background image isn't a property that can be animated - you can't tween the property.

相反，尝试使用position：absolute将所有图像放在彼此的顶部，然后将所有图像的不透明度设置为0，除了你想要的重复。

Instead, try laying out all the images on top of each other using position:absolute, then animate the opacity of all of them to 0 except the one you want repeatedly.

这篇关于使用CSS3动画改变背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！