1

I want to increase the duration of fading using bootstrap class fade. I found a few solutions like: Change amount of time Bootstrap tooltips display / fade in and out

How can I change the speed of the fade for alert messages in Twitter Bootstrap?

This is my full code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <style>
        .fade {
            opacity: 0;
            -webkit-transition: opacity 40s linear;
            -moz-transition: opacity 40s linear;
            -ms-transition: opacity 40s linear;
            -o-transition: opacity 40s linear;
            transition: opacity 40s linear;
        }
    </style>
</head>
<body>


<div class="container">

    <h2>Wells are sections with border and grey background</h2>

    <div class="well">Basic Well</div>
    <div class="well well-sm">Small Well</div>

    <div class="alert alert-success">
        Congratulations, you just won the game!
    </div>

    <!-- to make the alert closable -->
    <div class="alert alert-info">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        Don't forget Kelly's birthday is today!
    </div>

    <!-- add the fade and in class to animate when closing -->
    <div class="alert alert-danger fade in">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        Are you sure you want to delete your account?
    </div>

</div>

</body>
</html>

And it just doesn't work. What am I doing wrong?

Community
  • 1
  • 1

2 Answers2

1

This should solve your problem:

.fade {
    -webkit-transition-duration: 5s; /* Safari */
    transition-duration: 5s;
}

Also, more info about transition-duration: https://www.w3schools.com/CSSref/css3_pr_transition-duration.asp

Krystian Borysewicz
  • 784
  • 10
  • 23
  • I don`t know why, but it doesn`t work as well. Try it yourself. –  Feb 18 '17 at 09:46
  • It uses Bootstrap css. Just add !important and the end of the line like this: transition-duration: 5s !important; – Laurent Oct 31 '20 at 21:11
0

Have you tried !important? So, it would look like this:

.fade {
    opacity: 0;
    -webkit-transition: opacity 1s linear !important;
    -moz-transition: opacity 1s linear !important;
    -ms-transition: opacity 1s linear !important;
    -o-transition: opacity 1s linear !important;
    transition: opacity 1s linear !important;
}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
    
<div class="container"><br><br>
    <div class="alert alert-info fade in" id="alert">
        <a href="#" class="close" onclick="document.getElementById('alert').style.opacity = '0'">&times;</a>
        Try closing this
    </div>
</div>

You can set whatever for the transition duration!

It is currently set to 1 second, but if you think it is too slow, try with 300ms

Hope this helped

undefined
  • 1,019
  • 12
  • 24
  • It doesn`t work. I want fading in to take more time and I don`t care how to do that and I don`t even know how to do that. I tried a few solutions from stack overflow and they all failed. Your solution failed as well. –  Feb 18 '17 at 09:47
  • @oobarbazanoo Fading in of what? Nothing is fading in. The alerts are alredy displayed. Your transition is when they get different opacity value. – undefined Feb 18 '17 at 09:49
  • When I press the link × on the alert I want the alert to fade in smoothly. –  Feb 18 '17 at 09:50
  • @oobarbazanoo When you click the link, the alert doesn't gets opacity: 0; so it would hide smoothly. You can try adding this attribute to the ×: onclick="document.getElementById('alert').style.opacity = '0'" and add id="alert" to the alert you want to close. Then click the close button and enjoy. – undefined Feb 18 '17 at 09:55
  • it is not a solution. Bootstrap was created to make it easy to create such stuff. If I will start using js to solve bootstrap problems it will be just disgusting crutch which will make my code writing harder. –  Feb 18 '17 at 10:09
  • @oobarbazanoo you can't create interactive website with just Bootstrap and without JS. Do whatever if you don't like this! You will never make it disappear smoothly with clear BS, because it sets is to display: none, and there is no transition for display: none! – undefined Feb 18 '17 at 10:29
  • There is such class as fade in and that means that it is possible to change the duration of fading. –  Feb 18 '17 at 10:41