仅在id中应用“webkit-keyframes”

Question

我如何应用＆＃34; webkit-keyframes＆＃34;只在id＃progress1里面？我想这样做是因为页面中会有另一个进度条（＃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。