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

DEMO

http://jsfiddle.net/hAGKv/

提前感谢！

来源

2011-09-06 Charles Thomason

你在什么浏览器中检查它？：D –

在Google Chrome ... :-( –

您是否有此代码的链接？ –

背景图像不是可以动画的属性 - 你不能补间属性。

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

来源

2011-09-06 11:56:01

它适用于所有现代浏览器 – Anselm

真棒 - 它不是部分虽然它在Webkit中已经有一段时间了，但当你说所有的现代化时，你的意思是Chrome，Safari 6+，Firefox，IE10 +？将有助于澄清这个页面的未来访问者。）迄今为止，已有13372个！） –

只有webkit - 刚刚测试过（这还包括Opera 15） – Anselm

就像上面所说的那样，你不能在动画中改变背景图像。我发现最好的解决方案是将你的图像放入一张精灵画面中，然后通过改变背景位置进行动画处理，但如果你正在为移动设备构建，你的精灵表被限制为小于1900x1900像素。

来源

2011-10-06 18:59:16

它适用于Chrome 19.0.1084.41测试版！

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

你生活在未来;）

来源

2012-05-12 21:13:58

那么我可以改变他们在铬。它的简单和在Chrome中使用-webkit css属性正常工作。

来源

2012-11-06 10:37:28

您可以通过这个代码如下：

#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>

来源

2012-12-28 05:26:15

–

这是很快速和肮脏的，但它能够完成任务：我正在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

来源

2013-03-25 17:07:53 apaul

linear定时功能将线性地动画定义的属性。对于背景图像，它在改变动画帧的同时似乎具有淡入淡出/调整大小的效果（不确定它是否是标准行为，我会使用@Chukie B的方法）。

如果使用steps函数，它将离散地进行动画处理。有关更多详细信息，请参见MDN上的计时功能文档。对于你的情况，请这样做：

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

看到这个jsFiddle。

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

来源

2013-05-21 20:21:20

您可以使用动画背景位置属性和精灵图像。

来源

2014-05-22 16:58:18 BigBadAlien

我需要做和你一样的事情并降落在你的问题上。我最终找到了关于从here读到的步骤功能。

JSFiddle of my solution in action（请注意，目前在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 above mentioned the steps function但我想我会详细说明一下。非常简单和令人敬畏的东西。

来源

2014-12-17 20:59:14 Gazillion

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

#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>

来源

2015-10-22 04:15:46 BlueSix

为我工作。请注意使用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; 
}

来源

2017-02-02 15:57:31 drtf

使用CSS3动画更改背景图片

回答

相关问题