The css stylesheet applies with delay

user_6306928 0
Viewed 609

I use Bootstrap 5.0 beta1 and my own css file in a project and I wrote these selectors in my css for a custom login button (which is an <a> element by the way):

.login-button{
    text-decoration: none;
    background-color: red;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 6px;
    transition: 2s;
}

.login-button:hover{
    text-decoration: none;
    background-color: blue;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 6px;
}

But when I open the web page, weirdly the transition applies to the login link from no-style form to the original form it supposes to start with:

enter image description here

some other elements in my web page suffers from delay too. for example the navbar seems to have no style at all when I reload the page and after a fraction of a second the custom css styles I wrote in my custom css file (and bootstrap styles) applies to them.

PS: It works FINE when I apply the styles using internal css (<style> tag)!

bootstrap-5 twitter-bootstrap css html
3 Answers

What if you try to specify the property in your transition: 2s;

e.g transition: backgound ease-in 2s;

user_123308540

Your transition since it isn't specific affects all aspects of the control. If you want it to only apply to the background cover, and in this case, hover, then transition the background-color and set the easing:

.login-button{
    text-decoration: none;
    background-color: red;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 6px;
    transition: 2s ease-in-out background;
}

.login-button.no-transition{
    text-decoration: none;
    background-color: red;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 6px;
    transition: none;
}

.login-button:hover{
    text-decoration: none;
    background-color: blue;
    color: #ffffff;
    border-radius: 4px;
    padding: 4px 6px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" rel="stylesheet"/>


<button class="login-button">Login</button>

<button class="login-button no-transition">Login</button>

user_43359390

Try adding "preload" class in your body tag:

<body class="preload">

And add this in your CSS:

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

Then add this jQuery:

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

This solved my problem :) Reference -> here.

user_61700090
Related