css - 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}
}