CSS选择器名称的百分比

Question

这个CSS选择器是什么意思？

50% {
..
}

有没有提到这个"伎俩"？

Answer 1

它是@keyframes定义的一部分,它指出"当动画完成50%时,应该应用这些样式".几个这样的定义产生动画,并且根据另一个CSS规则中的动画定义来插值.

一个完整的CSS动画看起来像这样:

#flashy {animation: colourflash 5s linear infinite alternate}
@keyframes colourflash {
    from {background-color:red}
    50% {background-color:green}
    to {background-color:blue}
}