我想使用引导类fade增加淡入淡出的持续时间。我找到了一些解决方案，比如：更改引导工具提示显示/淡入淡出的时间量
如何更改Twitter Bootstrap中警报消息淡出的速度？
这是我的全部代码
<!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">×</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">×</a>
Are you sure you want to delete your account?
</div>
</div>
</body>
</html>
它就是不起作用。我做错了什么？
这将解决您的问题：
.fade {
-webkit-transition-duration: 5s; /* Safari */
transition-duration: 5s;
}
此外，有关过渡持续时间的更多信息：https://www.w3schools.com/CSSref/css3_pr_transition-duration.asp
你试过吗！重要？所以，它看起来像这样：
.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'">×</a>
Try closing this
</div>
</div>