在 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;
    }
}

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