过渡持续时间不适用于引导 thumbnail:hover

Question

我已将整个缩略图设为 link 并在 CSS 中指定其过渡持续时间为 0.3 秒。不幸的是它不起作用。我尝试了很多东西，但似乎还没有弄明白。

这是相关的 HTML 代码：

<div class="row">
    <div class="col-sm-12 col-md-3 col-lg-3"> <a href="https://www.cars.com">
            <div class="thumbnail">
                <img src="car.jpg" alt="Car">
            </div>
        </a>
    </div>
</div>

这是相关的 CSS 代码：

.thumbnail{
    transition-duration: 1s;
}

.thumbnail:hover{
    box-shadow: 5px 5px 5px red;
    transition-duration: 1s;
}

有谁知道为什么会这样/如何解决这个问题？任何帮助是极大的赞赏。

Answer 1

您错过了转换属性。您需要指定要制作动画的 css 属性。它可以是 all 或在本例中为 box-shadow。它应该是这样的：

.thumbnail{
    transition-duration: 1s;
}

.thumbnail:hover{
    box-shadow: 5px 5px 5px red;
    transition-duration: 1s;
    transition-property: box-shadow;

}

您可以在此处查看工作示例： https://jsbin.com/qosusugige

关于 CSS transitions in MDN 的良好文档。

Answer 2

不仅缺少过渡属性，而且 bootstrap css 样式表中的某处阻止了过渡的影响使用 !important

.thumbnail{
  transition:box-shadow 0.3s !important;
    transition-duration: 1s;
}

.thumbnail:hover{
    box-shadow: 5px 5px 5px red;
}

下面的片段

.thumbnail{
  transition:box-shadow 0.3s !important;
    transition-duration: 1s;
}

.thumbnail:hover{
    box-shadow: 5px 5px 5px red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
    <div class="col-sm-12 col-md-3 col-lg-3"> <a href="https://www.cars.com">
            <div class="thumbnail">
                <img src="car.jpg" alt="Car">
            </div>
        </a>
    </div>
</div>

过渡持续时间不适用于引导 thumbnail:hover

Transition duration not working for bootstraps thumbnail:hover

html

css

thumbnails

css-transitions

twitter-bootstrap-3