javascript - CSS:交叉淡入淡出动画？

Question

我实际上希望对此的回答是一个简单而直接的“否”，但我不得不问，也许有人甚至已经做了一个肮脏的解决方法。

我使用仅使用 CSS3 制作了一个 Angular 色，并添加了一个缓慢摇头的动画。这可以看作是空闲动画。现在我添加了一个特定的谈话动画(实际上是分开的，它适用于不同的 <div> )他保持不动，一个他用力摇头。我申请类(class) .shakehead在某些事件中通过 JavaScript 传递给包装器元素。

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

现在，当我只是突然将类应用到包装器时，在动画中间发生变化并造成难看的中断的可能性非常高，所以最好的办法是交叉渐变两个动画 。我想避免通过 JS 等待动画结束，因为等待 7 秒有点长。

( my usecase )

如果你不明白我的意思，看this Unity3D tutorial一分钟。

这样的交叉淡入淡出有可能吗？ (可能不是)

Answer 1

使用 opacity 属性可以实现交叉淡入淡出。您可以在同一个关键帧动画中使用多个属性(我很惊讶很多人不知道这一点)，所以不要害怕在不透明度变化的情况下编写高度变化!

您还应该将您的“移动嘴巴”放入与您第一次相同的 div 中，在完全相同的位置，然后像这样进行淡入淡出。 p>

@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*/
    }
}

将两个关键帧动画的持续时间设置为相同，瞧!您甚至无需使用 javascript 即可拥有完美的交叉淡入淡出效果!你怎么看？