CODEWITHSUNDEEP
javascripthtmlcsswebkit
Joshua Boudreau
Joshua Boudreau

Reputation: 11

How can I make a background image slowly blur on page opening/ refreshing?

I am trying to transition my background image from a normal state to a blur(3px) on page opening/ refreshing. Is there a way to do this with -webkit-transition or do I need to use javascript?

Upvotes: 1

Views: 2944

Answers (2)

Tabetha Moe
Tabetha Moe

Reputation: 480

Wyze and I have created a jsFiddle for you with what I think you are asking for. Upvote if this is what you need.

<div id="background" class="blur"></div>

#background {
    background-image: url('http://www.comicsandmemes.com/wp-content/uploads/WTF-meme.jpg');
    background-repeat: no-repeat;
    width: 100%;
    height: 600px;
}

.blur {
  -webkit-animation: blur 5s;  
  -moz-animation: blur 5s;
  animation: blur 5s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;  
  animation-fill-mode: forwards;  
}

@-webkit-keyframes blur {
  0% { 
        -webkit-filter: blur(0px);
    }
  0% { 
        -webkit-filter: blur(1px); 
    }
  50% { 
        -webkit-filter: blur(2px);
    }
  100% { 
        -webkit-filter: blur(3px); 
    }
}

@-moz-keyframes blur {
  0% { 
        -moz-filter: blur(0px);
    }
  0% { 
        -moz-filter: blur(1px); 
    }
  50% { 
        -moz-filter: blur(2px);
    }
  100% { 
        -moz-filter: blur(3px); 
    }
}

@keyframes blur {
  0% { 
        filter: blur(0px);
    }
  0% { 
        filter: blur(1px);
    }
  50% { 

        filter: blur(2px);
    }
  100% { 
        filter: blur(3px); 
    }
}

https://jsfiddle.net/1e7mo2cp/

Upvotes: 3

Alex
Alex

Reputation: 1442

Take a look at this code: 

.blur {
  -webkit-animation: blur 3s ;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes blur {
  0% { -webkit-filter: blur(0px); }
  100% { -webkit-filter: blur(3px); }
}
 <img src="http://placehold.it/350x150" class="blur" />

This allows you to set a class that will transition a blur using CSS animations and a class. You can find more info about CSS animations here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

Upvotes: 2

Related Questions