How To Prevent Transition Animation To Run Page Load

I have this HTML code :

<!DOCTYPE html>
<html>
  <link rel="stylesheet" type="text/css" href="css/music_index.css">
  <head>
    <title></title>
  </head>
  <body>
    <div class="main_container">
      <div class="main_header">
        <center><input type="search" class="main_page_search"></center>
      </div>
    </div>
  </body>
</html>

And This CSS :

body {
  background-color: #F3F3F3;
  font: 12px/1.4 "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Garuda,Verdana,Tahoma,sans-serif;
  margin: 0;
}

.main_container {
  background-color: white;
  width: 1050px;
  margin: 0 auto;
  height: 900px;
}

.main_header {
  height: 400px;
  border-top: 8px gray solid;
  background: url(../img/header_bg.jpg) no-repeat;
  background-size: 1050px;
}

.main_page_search {
  font-family: "Interstate","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Garuda,Verdana,Tahoma,sans-serif;
  margin-top: 200px;
  width: 60%;
  color: #666;
  outline: 0;
  border: 0;
  padding: 5px 7px;
  background: #e5e5e5;
  height: 40px;
  border-radius: 4px;
  -webkit-transition: background 0.4s ease 0s;
  -moz-transition: background 0.4s ease 0s;
  -o-transition: background 0.4s ease 0s;
  transition: background 0.4s ease 0s;
}

.main_page_search:focus {
  background-color: white;
}

My problem is that when I refresh the page the background of the search input becomes white and then come back to gray which means the transition is happening while I'm not clicking on the input how do I prevent that?

Answers


just added a class of "preload" to the body element.

<body class="preload">

Then ensure no transitions would happen:

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

Then removed that class on page load:

JQuery

$(window).load(function() {
  $("body").removeClass("preload");
});

Quick video of the issue


Need Your Help

Call function not working for all sub-classes

php oop call

I'm trying to use the __call function to execute instructions before a specific action.

how save data to excel manually

javascript php html mysql phpexcel

How do i make my code make it manually save in excel? because so far in my code it will transfer my filtered data from mysql database to Excel file...how can i make it manual save without making a ...