Menu
Here's my fiddle.
I just want the " background-image: " in the css to load fully and display after 3 seconds with a quick fade in effect, until then the entire div must be in black color.
How it is possible in css or javascript.
.initials { position:absolute; background:black; background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif"); color:white; margin-top:20px; padding-top:20px; padding-bottom:20px; width:60px; text-align:center; margin-left:20px; font-size:17px; letter-spacing:5px; box-shadow:0px 2px 3px rgba(0,0,0,.15); overflow: hidden; white-space: nowrap; }<div class="initials">A</div>
931
1) Create a DIV tag with a unique ID; 2) Place the image into a background:url style element of a DIV tag; 3) Set the height and width properties of the DIV tag to that of the selected image.
To make a background image not repeat in HTML, specify no-repeat in the background-repeat property or the background shorthand property. The background image is set to 'no-repeat' using the 'background-repeat' property. The above example uses the background-repeat property to set the image to no-repeat .
CSS Fade Background Transition You could also create a fade background color transition effect that doesn't require the user to scroll down the page. Instead, use the CSS animation property to style the body element.
The CSS animation-delay property has the following syntax: animation-delay: [time] | initial | inherit; As you can see, there are three possible values: time, initial, and inherit. The first option is [time], which is the number of seconds or milliseconds before the animation starts.
With some minor changes, I might have achieved what you want with only CSS3. Check the fiddle: http://jsfiddle.net/w11r4o3u/
CSS:
.initials { position:relative; background:black; color:white; margin-top:20px; padding-top:20px; padding-bottom:20px; width:60px; text-align:center; margin-left:20px; font-size:17px; letter-spacing:5px; box-shadow:0px 2px 3px rgba(0,0,0,.15); overflow: hidden; white-space: nowrap; } .initials .text { position: relative; } @-webkit-keyframes test { 0% { opacity: 0; } 100% { opacity: 1 } } .initials:before{ content: ""; background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif"); position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-animation-name: test; -webkit-animation-duration: 3s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease-out; } HTML:
<div class="initials"><div class="text">A</div></div> Edited:
Now the animation starts after 3 seconds and takes .3s to complete. Here is the fiddle: http://jsfiddle.net/w11r4o3u/1/
To adjust the "velocity" that fadeIn occurs, edit -webkit-animation-duration: .3s;
If you want to adjust the animation "delay" to start, edit -webkit-animation-delay: 3s;
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
