Html 在CSS3动画期间更改同级元素的属性

我想改变一个元素的CSS属性，从兄弟元素的关键帧动画开始，比如说在动画的50%标记处

所以呢,

@keyframes animname
{
   ....

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

   ....
}

---

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

您可以做的是在两个不同的元素上触发两个动画，并仔细计时，这样的效果是在动画中的某个点上兄弟姐妹发生了一些事情

上面的精简代码公开了两个关键帧声明，如果它们在两个单独的元素上运行，其中一个将突然出现在另一个元素的中间

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

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