How to switch to the site after a certain time to change the background color and not to change it anymore (before rebooting)?

    3 answers 3

    Not very cross-browser, but without js. After 5 seconds, the transition to the background color for 2 seconds will start.

    body { animation-name: Name; animation-duration: 2s; animation-delay: 5s; animation-fill-mode: forwards; background-color: blue; } @keyframes Name { 0% { background-color: blue; } 100% { background-color: red; } }

      For events "after a certain time" in JavaScript there is a function setTimeout . It specifies the time in milliseconds. For example, cornflowerblue replace the background color with cornflowerblue after 2 seconds (2000 milliseconds):

       $(function() { setTimeout(function() { $("body").css("background-color", "cornflowerblue"); }, 2000); }); 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

      • Maybe he smoothly wanted?) - Yuri
      • @Yuri Let then clarify if I do something smoothly. - Vadim Ovchinnikov
      • and how to do the same with a photo (background: url ()) so that one photo changes another and smoothly, if not difficult. I don't know js at all - Mr. Tabrest
      • @ Mr.Tabrest This is another question pulling, because the photo is another. - Vadim Ovchinnikov
      • @ Mr.Tabrest either start learning JS, or do not engage in similar tasks. There will not be someone for you always to solve such problems. - Regent

      With jQuery, but 100% cross-browser, even in ie6 it will work

       setTimeout(function(){ $('body').animate({'background-color': '#f60'}, 300); },5000); // Changing color after 5 sec

      No jQuery

       setTimeout(function(){ document.getElementsByTagName('body')[0].style.backgroundColor = '#f60' }, 5000);

      and for the animation in the second case in css add

       body{transition-duration: .3s}