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

Question

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

所以，类似的，

@keyframes animname
{
   ....

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

   ....
}

Answer 1

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

您可以做的是在两个不同的元素上触发两个动画，并小心地为它们计时，这样效果就是在动画的特定点上 sibling 会发生一些事情。

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

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