Was wondering. I have 3 symbol / logos on my page. I want it where if i hover on one of the logos, a smoke effect plays in the background of it.

Would this be done with a webm in the background or a gif that replaces the original image on hover

When you stop hovering, the background smoke would disappear

Edit: I'm just wondering if a gif image would take to much bandwidith and load slowly for people causing an ugly animation. But a webm wouldn't play until its fully loaded

This post was edited by D2key on Jul 25 2016 04:24am

Gifs are not too bad in terms of performance as long as you don't have a bunch of them.

I would go for gif, webm isn't as widely supported as gif, and gifs can be made super tiny.

ofc .webm is better, but some browsers can't use .webm so i suggest using both.

"using gif in 2016 LUL."

browser detection ftw

I would just use a gif. But use CSS to set/unset the smoke animation:

.button {
background-image: none;
}
.button:hover {
background-image: url('smoke.gif');
}