Combining semi transparency of background image with keyframe animation

I would like to add a continuous fading effect in the background image of my wrapper. I know you can use keyframe animation to make a background image move arround, however, i was wondering if there is a fade effect possible using this technique.

http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/

For example:

@-webkit-keyframes fontbulger {
0% {
    font-size: 10px;
}
30% {
    font-size: 15px;
}
100% {
    font-size: 12px;
}

Would be in my perfect situation something like…

@-webkit-keyframes fontbulger {
0% {
    background: url(image.png, 1);
}
30% {
    background: url(image.png, 0.5);
}
100% {
    background: url(image.png, 1);
}

…for which 0.5 would be a visibility of 50%. Ofcourse, this suggestion does not work. Any way to accomplish this? I know you can apply transparency to RGB value’s
, but I would like to apply it to an image.

Problem courtesy of: Daan Twice

Solution

I am not aware of any way currently to directly affect the opacity of the background image as you seek. Two possible workarounds are:

1. PureCSS3way (not well supported yet)

Using a pseudo-element to supply the background-image
allowed opacity
to be used and keep the whole thing as pure css,
but it did not work on webkit

(which apparently does not support animation on pseudo-elements), only on the moz
extension (I could not test IE10… feedback on that would be helpful). Compare Firefox with Chrome for this fiddle
, which used this code:

HTML

Foreground text

CSS

.bkgAnimate {
    width: 300px; /*only for demo*/
    height: 200px; /*only for demo*/
    position: relative;
    z-index: 1; /* make a local stacking context */
}

.bkgAnimate:after {
    content: '';
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(src="your/image/path/file.png") no-repeat;
    z-index: -1;  
    -webkit-animation: fontbulger  3s infinite;
    -moz-animation:    fontbulger  3s infinite;
    -ms-animation:     fontbulger  3s infinite;
}
@-webkit-keyframes fontbulger {
    0%   { opacity: 1; }
    30%  { opacity: 0.5; }
    100% { opacity: 1; }
}
@-moz-keyframes fontbulger  {
    0%   { opacity: 1; }
    30%  { opacity: 0.5; }
    100% { opacity: 1; }
}
@-ms-keyframes fontbulger  {
    0%   { opacity: 1; }
    30%  { opacity: 0.5; }
    100% { opacity: 1; }
}

2. Cluttered HMTL solution (more cross browser friendly)

Changing to put an actual img
tag in as the background seemed to be the only way to get webkit
to behave, as this fiddle shows
. But that may not be desirable for you. Code similar to above except:

HTML

Foreground text

CSS change from above

Change the :after
selector to .bkgAnimate .bkg
and remove the content
and background
property from that code.

Solution courtesy of: ScottS

责编内容来自:CSS3 Recipes (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Combining semi transparency of background image with keyframe animation

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录