Twitter Bootstrap Question posted in

Increase the duration of fading in. Bootstrap – Twitter bootstrap

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?

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search