相邻兄弟的悬停效果不起作用

Question

我在Chrome中有一个奇怪的行为......

如果我有一个元素[A]对元素[B]有悬停效果，我在[A]上放置动画，元素[B]的转换中断

短codepen

.B{
    opacity: 0;
    transtion: all 1s ease-in-out;
}
.A{   
    animation: spin 4s linear infinite; // <-- comment this out and the transition works
    &:hover + .B{
        opacity: 1;
   }
}

@keyframes spin { 
    100% {transform: rotate(360deg) }
}