Как анимация и стили перехода каскад ⇐ CSS

[Anonymous]

Согласно MDN,
Cascade Order выглядит так:
, где мы можем видеть стили перехода, придерживающиеся стили анимации. Но в моем примере он не работает так: < /p>


div {
width : 200px;
height : 200px;
background : red;
animation : rota 2s linear forwards infinite;
transition : transform 40s linear;
}
div:hover {
background : green;
transform : translateX(1000px) !important;
}
@keyframes rota {
100% { transform: rotateZ(360deg); }
}< /code>
< /code>
< /div>
< /div>
< /p>
Я ожидаю, что Div медленно перемещается вправо на паря, потому что стили перехода должны перезаписывать свойства преобразования в ключевом фрейму. Но вместо этого поведение очень непоследовательное, а стили анимации чаще имеют приоритет, а стили перехода не полностью применяются.


Подробнее здесь: https://stackoverflow.com/questions/777 ... es-cascade