html - 仅在 id 内应用 "webkit-keyframes"

Question

我如何只在 id #progress1 中应用“webkit-keyframes”？我想这样做是因为页面中将有另一个进度条 (#progress2)，其中包含不同的 webkit 关键帧。

#progress1 {
    background: white; /*-- Color of the bar --*/
    height: 30px;
    width: 0%;
    max-width: 100%;
    float: left;
    -webkit-animation: progress 2s 1 forwards;
    -moz-animation: progress 2s 1 forwards;
    -ms-animation: progress 2s 1 forwards;
    animation: progress 2s 1 forwards;
}



@-webkit-keyframes progress { 
    from { }

    to { width: 36% }
}

Answer 1

不可能在 CSS 中限定动画范围。只是给他们不同的名字。不要将它们都称为 progress。