使用CSS3动画更改背景图片

Question

使用CSS3动画更改背景图片

38

为什么这个没有起作用？我做错了什么？

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/

- Charles Thomason

你在用什么浏览器查看这个页面？ :D - Hans Wassink

你有这段代码的链接吗？ - Hans Wassink

当然，可以查看http://jsfiddle.net/hAGKv/。 - Charles Thomason

你的代码可以通过一些适应工作得很好。请看下面我的完整回复;-) - bArraxas

13个回答

8

它在Chrome 19.0.1084.41 beta中运行！

因此，在未来的某个时候，关键帧可能真正成为...帧！

你正在生活在未来 ;)

- Luke Stanley

6

对我来说没有问题。

注意使用background-image来进行过渡效果。

#poster-img {
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  overflow: hidden;
  -webkit-transition: background-image 1s ease-in-out;
  transition: background-image 1s ease-in-out;
}

- drtf

4

我需要做与您相同的事情，并降落在了您的问题上。我最终发现了这里介绍的步骤函数。我的解决方案在JSFiddle中的演示（请注意，它目前只能在Firefox中运行，我会让您添加跨浏览器的代码行，尝试保持解决方案干净整洁）。

首先，我创建了一个有两个帧的精灵表。然后我创建了div并将其作为背景，但是我的div只有精灵的大小（100px）。

<div id="cyclist"></div>

#cyclist {
    animation: cyclist 1s infinite steps(2);
    display: block;
    width: 100px;
    height: 100px;
    background-image: url('../images/cyclist-test.png');
    background-repeat: no-repeat;
    background-position: top left;
  }

动画设置为2步，并且整个过程需要1秒钟。

@keyframes cyclist {
  0% {
    background-position: 0 0; 
   }
  100% { 
    background-position: 0 -202px; //this should be cleaned up, my sprite sheet is 202px by accident, it should be 200px
   }
}

Thiago提到了steps函数，但我想更详细地解释一下。非常简单和棒的东西。

- Gazillion

使用以下技术可以立即将图像从一个更改为另一个：使用图像“精灵”+ CSS动画“步骤”技术对我很有效。相比之下，如果我想要一个“无限”循环，则使用上面提到的<IMG> +不透明度技术效果不如预期：动画会失控并重叠在一起。 - Panini Luncher

4

这个方法虽然比较快捷，但并不十分严谨，但它能够完成工作：jsFiddle

    #img1, #img2, #img3, #img4 {
    width:100%;
    height:100%;
    position:fixed;
    z-index:-1;
    animation-name: test;
    animation-duration: 5s;
    opacity:0;
}
#img2 {
    animation-delay:5s;
    -webkit-animation-delay:5s
}
#img3 {
    animation-delay:10s;
    -webkit-animation-delay:10s
}
#img4 {
    animation-delay:15s;
    -webkit-animation-delay:15s
}

@-webkit-keyframes test {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
    }
}
@keyframes test {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
    }
}

我正在使用jQuery为我的网站制作类似的效果，但过渡是在用户向下滚动页面时触发的 - jsFiddle

- apaul

3

你的代码可以通过一些改动来很好地运行：

div {
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: contain;
  animation: animateSectionBackground infinite 240s;
}

@keyframes animateSectionBackground {
  00%, 11% { background-image: url(/assets/images/bg-1.jpg); }
  12%, 24% { background-image: url(/assets/images/bg-2.jpg); }
  25%, 36% { background-image: url(/assets/images/bg-3.jpg); }
  37%, 49% { background-image: url(/assets/images/bg-4.jpg); }
  50%, 61% { background-image: url(/assets/images/bg-5.jpg); }
  62%, 74% { background-image: url(/assets/images/bg-6.jpg); }
  75%, 86% { background-image: url(/assets/images/bg-7.jpg); }
  87%, 99% { background-image: url(/assets/images/bg-8.jpg); }
}

以下是根据您的情况解释百分比的方法：

首先，您需要计算“块”。如果您有8种不同的背景，您需要执行以下操作： 100％/ 8 = 12.5％（为了简化，您可以忽略小数）=> 12％

之后，您获得了如下结果：

@keyframes animateSectionBackground {
  00% { background-image: url(/assets/images/bg-1.jpg); }
  12% { background-image: url(/assets/images/bg-2.jpg); }
  25% { background-image: url(/assets/images/bg-3.jpg); }
  37% { background-image: url(/assets/images/bg-4.jpg); }
  50% { background-image: url(/assets/images/bg-5.jpg); }
  62% { background-image: url(/assets/images/bg-6.jpg); }
  75% { background-image: url(/assets/images/bg-7.jpg); }
  87% { background-image: url(/assets/images/bg-8.jpg); }
}

如果您执行此代码，您会发现转换是永久的。如果您想要背景在一段时间内保持不变，可以像这样做：

@keyframes animateSectionBackground {
  00%, 11% { background-image: url(/assets/images/bg-1.jpg); }
  12%, 24% { background-image: url(/assets/images/bg-2.jpg); }
  25%, 36% { background-image: url(/assets/images/bg-3.jpg); }
  37%, 49% { background-image: url(/assets/images/bg-4.jpg); }
  50%, 61% { background-image: url(/assets/images/bg-5.jpg); }
  62%, 74% { background-image: url(/assets/images/bg-6.jpg); }
  75%, 86% { background-image: url(/assets/images/bg-7.jpg); }
  87%, 99% { background-image: url(/assets/images/bg-8.jpg); }
}

这意味着你想要：

bg-1 在 00% 到 11% 的位置固定不动
bg-2 在 12% 到 24% 的位置固定不动
等等

设置为11%，过渡时间将为1%（12% - 11% = 1%）。 240秒的总持续时间中的1％ => 2.4秒。

您可以根据需要进行调整。

- bArraxas

2

“线性”时间函数会使定义的属性按线性方式进行动画。对于背景图片，它似乎具有淡入淡出/缩放效果，同时更改动画帧（不确定这是否是标准行为，我会采用 @Chukie B 的方法）。

如果您使用“steps”函数，则会离散地进行动画。请参阅MDN上的时间函数文档以获取更多详细信息。对于您的情况，请按如下操作：

-webkit-animation-timing-function: steps(1,end);
animation-timing-function: steps(1,end);

看这个 jsFiddle。

我不确定这是否是标准行为，但当你说只有一个步骤时，它允许你在 @keyframes 部分更改起始点。这样你就可以定义动画的每一帧。

- Thiago Cardoso

1

最近我也需要做同样的事情。这里是一个简单的实现。

#wrapper { width:100%; height:100%; position:relative; }
#wrapper img { position:absolute; top:0; left:0; width:100%; height:auto; display:block; }
#wrapper .top { animation:fadeOut 2s ease-in-out; animation-fill-mode:forwards; }
@keyframes fadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}

<div id="wrapper">
  <img src="img1.jpg" class="top" style="z-index:2;">
  <img src="img2.jpg" style="z-index:1;">
</div>

- BlueSix

1

如上所述，您无法更改动画中的背景图像。我发现最好的解决方案是将您的图像放入一个精灵表中，然后通过更改背景位置来进行动画处理，但如果您正在为移动设备构建，则精灵表的大小限制为不到1900x1900像素。

- Chuckie B

0

您可以按照以下代码进行操作：

#cd{
  position: relative;
  margin: 0 auto;
  height: 281px;
  width: 450px;
}
#cf img{
  left: 0;
  position: absolute;
  -moz-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#cf img.top:hover{
  opacity: 0;
}

<div id="cf">
  <img class="button" src="Birdman.jpg" />
  <img src="Turtle.jpg" class="top" />
</div>

- Toeur Tenh

<div id="cf"> <img class="button" src="Birdman.jpg" /> <img src="Turtle.jpg" class="top" /> </div> - Toeur Tenh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rich Bradshaw · Accepted Answer

2020更新：是的，它可以做到！这里是方法。

代码段演示：

#mydiv{ animation: changeBg 1s infinite; width:143px; height:100px; }
@keyframes changeBg{
   0%,100%  {background-image: url("https://istack.dev59.com/YdrqG.webp");}
   25% {background-image: url("https://istack.dev59.com/2wKWi.webp");}
   50% {background-image: url("https://istack.dev59.com/HobHO.webp");}
   75% {background-image: url("https://istack.dev59.com/3hiHO.webp");}
}

<div id='mydiv'></div>

背景图片不是可以进行动画处理的属性 - 您无法对该属性进行补间操作。

原回答：（仍然是一个不错的替代方案）相反，尝试使用position:absolute将所有图像叠放在一起，然后将它们的不透明度动画化为0，除了您想要重复显示的那个。