Home/ Questions/Q 7048421
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T02:53:24+00:00

How do I change the background color of a <li> element after 3 seconds

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0