这是我的代码: 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)
更多推荐
发布评论