2

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.

Community
  • 1
  • 1
Daan Twice
  • 337
  • 1
  • 3
  • 15

1 Answers1

2

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. Pure CSS3 way (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

<div class="bkgAnimate">Foreground text</div>

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

<div class="bkgAnimate">Foreground text 
  <img class="bkg" src="your/image/path/file.png"/>
</div>

CSS change from above

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

ScottS
  • 71,703
  • 13
  • 126
  • 146