CSS：Crossfade动画？

Question

我实际上期待这个答案是一个简单而直接的“不”，但我不得不问，也许有人甚至已经做了一个肮脏的解决方法。

我使用仅限CSS3 制作了一个角色，并添加了一个慢慢摇头的动画。这可以看作是空闲动画。现在我添加了一个特定的谈话动画（实际上是单独的，它适用于不同的<div>），在那里他保持静止，并且他强烈摇头。我在某些事件中通过JavaScript将类.shakehead应用于包装元素。

@keyframes head-swing {
    0% {
        transform: rotate(-2deg);
    }
    50% {
        transform: rotate(2deg);
    }
    100% {
        transform: rotate(-2deg);
    }
}

.head {
    animation: head-swing 7s infinite ease-in-out;
}
.shake .head {
    animation: head-swing 1s infinite ease-in-out;
}

现在，当我只是突然将类应用于包装器时，在动画中间改变并创建丑陋中断的概率非常高，因此最好的做法是交叉淡化两个动画< / strong>即可。我想避免通过JS等待动画结束，因为等待7秒钟就可以了。

（my usecase）

如果您不知道我的意思，请观看this Unity3D tutorial一分钟。

这种交叉淡入淡出是否可行？ （可能没有）

Answer 1

使用opacity字符可以实现交叉淡入淡出。你可以在同一个关键帧动画中使用多个属性（我很惊讶很多人都不知道这一点），所以不要害怕用你的不透明度变化来写高度变化！。

您还应该将“移动的嘴巴”放在相同的div 中，而不是完全相同的位置，然后将此交叉淡化视为这样。

@keyframes crossfade1 { /*applied on the "first" mouth (still)*/
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes crossfade2 { /*applied on the "second" mouth (moving) [the height is an exemple]*/
    0% {
       opacity: 0;
       height: 3px /*the mouth is closed*/
    }
    50% {
       opacity: 1;
       height: 20px /*the mouth is open*/
    }
    100% {
       opacity: 0;
       height: 20px /*the mouth is closed*/
    }
}

将两个关键帧动画的持续时间设为相同，然后vo！即使没有使用javascript，您也可以获得完美的交叉淡入淡出！ 你觉得怎么样？