Процент в 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} 
}