Question

好的，我的.css

.centerhex {
    background-image:url(http://i.imgur.com/4sZDtfK.png);
    height:224px;
    width:210px;
    position:absolute;
    opacity:0;
    transition:opacity 2s ease-in-out;
}
.transtart{
    opacity:0
}
@-webkit-keyframes fadein { 
    0%{opacity:0;}
    40%{opacity:1;}
    50%{opacity:1;}
    100%{opacity:0.05;} 
}
@keyframes fadein {
    0%{opacity:0;}
    40%{opacity:1;}
    50%{opacity:1;}
    100%{opacity:0.05;} 
}
.done{
    animation-delay:0.5s;
    -webkit-animation-delay:0.5s;
}
.fadein{    
    animation:fadein 0.65s;
    animation-timing-function:linear;
    animation-fill-mode:forwards;
    animation-iteration-count:1;
    -webkit-animation-iteration-count:1;
    -webkit-animation:fadein 0.65s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes pulse { 
    0%{opacity:0.05;}
    10%{opacity:0.1;}
    100%{opacity:0.05;} 
}
@keyframes pulse {
    0%{opacity:0.05;}
    10%{opacity:0.1;}
    100%{opacity:0.05;} 
}
.pulse{ 
    animation:fadein 4s;
    animation-timing-function:linear;
    animation-fill-mode:forwards;
    animation-iteration-count:infinite;
    animation-delay:1s
    -webkit-animation-delay:1s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation:fadein 4s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-fill-mode: forwards;
}

我很好奇的是，是否可以创建一个专门用于嵌套预定义类的id，例如：

#hexa.centerhex.transtart.fadein.done

到目前为止，这样做的实验都失败了......所以我不完全确定我做错了什么。

我的想法是，我将创建一个用另一个ID替换ID的脚本。例如，我会：

#hexa.centerhex.transtart.fadein.done

转入：

#hexb.centerhex.transtart.pulse.done

Answer 1

你可以做你所要求的但看起来你希望根据你输入的类的顺序得到一个不切实际的结果。不幸的是，基于您选择的选择器，渲染不会按特定顺序进行。

但是，如果时间问题，可以使用setTimeout()使用Javascript轻松完成。

如果您不关心添加到每个id的这些类的操作顺序，那么您应该能够根据需要尽可能多地执行此操作（并且作为{具有相当高的成功率） {1}}仅受#id和客户端/浏览器设置的限制。

不要忘记你的!important：）

将类嵌套在.css中的ID中？

1 个答案: