CSS animation复合动画,css3 – 将多个css动画合并成一个整体动画

我有一组动画，我排队一个接一个，创建一个更大的整体动画。为了简单起见，我创建了一个简单的小提琴来演示我的意思，但它是我想实现的一个简化版本(底部代码)…

我想做的是将所有这些组合成一个动画，而不是几个。目前，我添加了一个类来触发动画的不同阶段，但我想要做的是只添加一个类来启动动画，然后它会去。

我不知道如何将动画组合成一个，因为他们工作在不同的元素。我还是相当新的CSS3动画，所以有可能做到这一点吗？

有什么想法吗？

HTML

CSS

.outside {

border: 1px solid magenta;

height: 100px;

width: 100px;

position: relative;

}

.inside {

border: 1px solid skyblue;

height: 60px;

width: 60px;

margin-top: -31px;

margin-left: -31px;

position: absolute;

top: 50%;

left: 50%;

}

@-webkit-keyframes scale-in {

0% {

-webkit-transform: scale(0);

}

100% {

-webkit-transform: scale(1);

}

}

@-