文章/答案/技术大牛

发布

社区首页 >问答首页 >当分配给多个类时，无法使用CSS动画div元素

问当分配给多个类时，无法使用CSS动画div元素
EN

Stack Overflow用户

提问于 2017-03-01 19:53:01

回答 2查看 42关注 0票数 0

我试图将CSS动画应用于多个div元素，如下所示：

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

其中容器框架是div元素的框架，边框是为这些边框执行动画所需的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元素不闪烁。知道有什么问题吗？

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-03-01 20:57:34

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

但也有一些不明确的代码：

问题是“容器框架”类。因为您的div不仅是一个div，而且还有类“容器-框架”，所以它会得到一个固定的边框样式和边框颜色。即使您已经为下面的标记"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 ;
    }

票数 1

Stack Overflow用户

发布于 2017-03-01 21:24:02

当我从容器框中删除边框颜色时，问题就解决了。感谢@KevDev

@keyframes example {
        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;}
    }
    .container-frame {
        position: absolute;
        border-style: solid;
        border-width: 5px;
        animation-duration: 0.5s;
        animation-name: example;
        animation-timing-function: step-end ;
        animation-iteration-count: infinite ;
        animation-direction: alternate ;
    }

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42540784

复制

相似问题

问当分配给多个类时，无法使用CSS动画div元素
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当分配给多个类时，无法使用CSS动画div元素EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当分配给多个类时，无法使用CSS动画div元素
EN