Css анимация не работает?

Question

[Леонид Горшков]

#load {
            position: absolute;
            
         }
         #load > B {
            color: red;
            animation: nev 1s infinite alternate;
         }
         
         @keyframes nev {
           0%  {
           transform: rotateY(0deg);
           }

           100% {
            transform: rotateY(-360deg);
           }
         }

<div id="load">
         <b>S</b>ynacs
      </div>

В css написанна анимация на первый символ в теге . Так же там написанно что он будет красный (этот символ).
В итоге символ красный (как и надо), но анимация не вертится!
если исправить css на вот такой:

#load {
            position: absolute;
            animation: nev 1s infinite alternate;
         }
         #load > b {
            color: red;
         }
         
         @keyframes nev {
           0%  {
            transform: rotateY(0deg);
           }

           100% {
            transform: rotateY(-360deg);
           }
         }

То всё работает. В чем причина?

Answer 1

[yakupov112]

https://codepen.io/anon/pen/vrzQmO

Comments

[Леонид Горшков]

Всё из за типа блока? оО

[aloky]

Леонид Горшков, Да