用CSS3动画改变背景图像

前端之家收集整理的这篇文章主要介绍了用CSS3动画改变背景图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
为什么这不工作?我究竟做错了什么?

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

演示

http://jsfiddle.net/hAGKv/

提前致谢!

解决方法

背景图片不是可以动画的属性 – 您不能补间财产。

相反,尝试使用position:absolute将所有图像放在彼此之上,然后将所有图像的不透明度动画化为0,除了您想要重复的不透明度。

原文链接:https://www.f2er.com/css/219523.html

猜你在找的CSS相关文章