在CSS3动画期间更改兄弟元素的属性

Question

我想从兄弟元素的关键帧动画中更改元素的CSS属性，比如动画的50％标记。

所以，像，

@keyframes animname
{
   ....

   50%
   {
       sibling-element{ display:inline;}
   }

   ....
}

Answer 1

这是不可能的。关键帧动画声明包含一组总运行时的百分比，用于定义可动画属性状态之间的转换，例如不透明度0到1或左0到200px。值必须是可动画属性才能成为有效的关键帧值，因此不允许使用css选择器。 MDN go into more detail here

你可以做的是在两个不同的元素上触发两个动画并仔细计时，以便影响动画中特定点的同胞发生的事情。

See the jsfiddle

@keyframes sibling-demo {
    0% {
        opacity: 0;
    }
    49.9999% {
        opacity: 0;
    }
    50% {
        opacity: 1; 
    }
    100% {
        opacity: 1; 
    }
}

@keyframes demo {
    0% {
        width: 100px;
    }
    100% {
        width: 400px;
    }
}

上面的精简代码公开了两个关键帧声明，如果它们在两个单独的元素上运行，则会突然发生在另一个元素的中间。