CODEWITHSUNDEEP
htmlcss
Pabluez
Pabluez

Reputation: 2775

change <li> background color after 3 secs without javascript

How do I change the background color of a <li> element after 3 seconds the page is loaded without any javascript or JQuery? Only with CSS? I've seen people doing amazing things with CSS only and I think that this is also very possible.

This <li> is performing a horizontal menu and i would like to highlight this option for the 3 first seconds after the page is loaded.

No problem if the solution is css3 and HTML5.

Upvotes: 0

Views: 952

Answers (2)

methodofaction
methodofaction

Reputation: 72385

A solution with coverage all the way down to Netscape Navigator 2.0:

Use an animated gif as the background image.

Demo http://jsfiddle.net/VPHEX/

Upvotes: 2

easwee
easwee

Reputation: 15895

This sample will do an animation on load that will change the background color of the square from red to yellow over with a transition of 5 seconds and will start 5 seconds after load - will execute only once and stay on yellow background:

<!DOCTYPE html>
<html>
    <head>
    <style type="text/css"> 
        .square {
            width:100px;
            height:100px;
            background:red;
            position:relative;
            -moz-animation-name:colorChange;
            -moz-animation-duration:5s;
            -moz-animation-delay:5s;
            -moz-animation-iteration-count:1;
            -moz-animation-fill-mode:forwards;
        }
        @-moz-keyframes colorChange {
            from {background:red;}
            to {background:yellow;}        
        }

    </style>
    </head>
    <body>
        <div class="square"></div>
    </body>
</html>

JSFiddle sample: http://jsfiddle.net/c8DDP/

Works from Firefox 4.0+ - the same can be accomplished using -webkit prefix for webkit based browsers.

Upvotes: 4

Related Questions