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