html - 分配给多个类时无法使用 CSS 为 div 元素设置动画

Question

我正在尝试将 CSS 动画应用于多个 div 元素，如以下 HTML 代码所示:

{% for i in player_range %}
<div id="container-frame-{{ i }}" class="container-frame borderblinker">
...
</div>
{% endfor %}

其中 container-frame 是 div 元素的框架，borderblinker 是为这些边框执行动画所需的 css。

下面是我为每个元素应用的 CSS 样式。

.container-frame {
    position: absolute;
    border-style: solid;
    border-width: 5px;
    border-color: whitesmoke;
        }
@keyframes borderblinker {
    0%    {border-color: #444444;}
    10%    {border-color: #4C4C4C;}
    20.0%  {border-color: #4C3333;}
    30.0%  {border-color: #660000;}
    40.0%  {border-color: #4C1919;}
    50.0%  {border-color: #990000;}
    60.0%  {border-color: #CC0000;}
    70.0%  {border-color: #FF0000;}
    100.0%  {border-color: #FF0000;}
    }
div{
    animation-name: borderblinker;
    animation-timing-function: step-end ;
    animation-iteration-count: infinite ;
    animation-direction: alternate ;
    animation-duration: 2s;
    }

边框样式应用正确，但 div 元素不闪烁。知道可能是什么问题吗？

Answer 1

您忘记设置“动画持续时间”。

但是还有一些不清楚的代码:

问题是类“container-frame”。因为你的 div 不仅是一个 div，而且还有类“container-frame”，所以它有一个固定的 border-style 和 border-color。即使您已经为下面的标签“div”定义了动画，类选择器也会因为级联顺序而获得优先级。类优先于标签选择器。

http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

您可以通过使用类选择器而不是标签选择器来定位动画 div 来解决问题:

div.container-frame{
    animation-name: borderblinker;
    animation-timing-function: step-end ;
    animation-iteration-count: infinite ;
    animation-direction: alternate ;
    }