CODEWITHSUNDEEP
csssasscss-animations
justin.esders
justin.esders

Reputation: 1416

Infinite Background Image(PNG) Animation Not Seamless

I have a background image that I would like to animate. Its a faint transparent PNG that is smoke. My question is how can you seamlessly animate the background image so you cant see the stop/start point of the animation and get rid of the "jump" that occurs every time the animation resets. An SVG would also not be good here. Is there a more preferred method I should use, or am I overlooking something. Can someone please help me. Thanks in advance.

HTML

<div class="background" style="background-image:url('http://punchdrunk.staging.sfp.net/wp-content/themes/punchdrunk/assets/img/backgrounds/footer.jpg')">
<div class="overlay"  style="background-image:url('http://punchdrunk.staging.sfp.net/wp-content/themes/punchdrunk/assets/img/backgrounds/smoke.png')"></div>
</div>

CSS

.background,.overlay{height:100%; width:100%; position:absolute; left:0; right:0; top:0; bottom:0;}
.overlay   { opacity:0; animation:smoke 5s infinite;}

@keyframes smoke
{
0%   {opacity:0}
100%   {opacity:1}
}

Below is my codepen

http://codepen.io/Jesders88/pen/zZMZOG

Upvotes: 0

Views: 218

Answers (1)

Matt Clark
Matt Clark

Reputation: 28599

How do you expect it to look? You snap from 100% to 0% transparency..

Seems to me you would want to use something like this to fade back out again?

0%      {opacity:0;}
50%     {opacity:1;}    
100%    {opacity:0;}

Upvotes: 1

Related Questions