使用css3淡入淡出图像(Fade image on

使用css3淡入淡出图像(Fade image on-load using css3)

这是我的代码： http ： //jsfiddle.net/NVk2N/2/

我正试图淡化大背景图像。我试过这个：

#cover { background: url(http://bootstrapguru.com/preview/cascade/images/carousel/imageOne.jpg) no-repeat center center fixed; background-size: cover; height:100%; width: 100%; position:fixed; opacity:0; transition: opacity 2s; }

但是图像永远不会出现。 我究竟做错了什么？

詹姆士

This is my code: http://jsfiddle.net/NVk2N/2/

I'm trying to fade the large background image in. I tried this:

#cover { background: url(http://bootstrapguru.com/preview/cascade/images/carousel/imageOne.jpg) no-repeat center center fixed; background-size: cover; height:100%; width: 100%; position:fixed; opacity:0; transition: opacity 2s; }

however the image never appears. What am I doing wrong?

James

最满意答案

实际上你需要一个不透明度的动画，你可以在其中设置animation-fill-mode: forwards这样最后一帧在动画的最后一次迭代后继续应用。

更新小提琴 ： http ： //jsfiddle.net/NVk2N/7/

#cover { ... -webkit-animation: 2s show; -moz-animation: 2s show; -ms-animation: 2s show; animation: 2s show; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes show { from { opacity: 0 } to { opacity: 1 } } @-moz-keyframes show { from { opacity: 0 } to { opacity: 1 } } @-ms-keyframes show { from { opacity: 0 } to { opacity: 1 } } @keyframes show { from { opacity: 0 } to { opacity: 1 } }

（当然，您需要在必要时使用供应商前缀）

---

注意 ：如果您只需要淡入背景图像 （而不是整个元素），您可以将背景加载到绝对定位的伪元素（例如#cover:before ）中，并带有负z-index然后将动画应用于psuedoelement本身：

这是codepen的一个例子： http ：//codepen.io/anon/pen/EJayr/

相关的CSS

#cover { position: relative; width : ...; height : ...; } #cover:before { content : ""; position: absolute; z-index : -1; top : 0; left : 0; width : 100%; height : 100%; background: url(...) top left no-repeat; -webkit-animation: 5s show; -moz-animation: 5s show; -ms-animation: 5s show; animation: 5s show; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; }

关于伪元素的动画可以在每个现代浏览器上正常工作（除了Chrome <26 - 在问题＃54699上报告 - 但不是真正的问题，因为此时的当前版本是34.0.1847.116）

You actually need an animation of the opacity, in which you set animation-fill-mode: forwards so the last frame continues to apply after the final iteration of the animation.

Updated fiddle: http://jsfiddle.net/NVk2N/7/

#cover { ... -webkit-animation: 2s show; -moz-animation: 2s show; -ms-animation: 2s show; animation: 2s show; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes show { from { opacity: 0 } to { opacity: 1 } } @-moz-keyframes show { from { opacity: 0 } to { opacity: 1 } } @-ms-keyframes show { from { opacity: 0 } to { opacity: 1 } } @keyframes show { from { opacity: 0 } to { opacity: 1 } }

(of course you need to use vendor prefixes where necessary)

---

Note: If you need to fade-in only the background image (and not the whole element) you could load the background inside an absolute positioned pseudoelement (e.g. #cover:before) with a negative z-index and just apply the animation to the psuedoelement itself:

Here's an example on codepen: http://codepen.io/anon/pen/EJayr/

Relevant CSS

#cover { position: relative; width : ...; height : ...; } #cover:before { content : ""; position: absolute; z-index : -1; top : 0; left : 0; width : 100%; height : 100%; background: url(...) top left no-repeat; -webkit-animation: 5s show; -moz-animation: 5s show; -ms-animation: 5s show; animation: 5s show; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; }

Animations on pseudoelements work fine on every modern browser (except in Chrome < 26 — as reported on issue #54699 — but not really a problem, since the current version at this moment is 34.0.1847.116)