CSS animation not working?

Question

css

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

An animation is written in css for the first character in the tag . It is also written there that it will be red (this symbol).
As a result, the symbol is red (as it should be), but the animation does not spin!
if you change the css to something like this:

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

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

That all works. What is the reason?

Answer 1

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