CSS3多重动画效果

Question

我已经设置了一个儿童目标网站，我想要一些图像在悬停或onclick上进行动画处理（仅用于CSS，仅用于娱乐，我已经知道如何在JS中执行此操作） 。 你有没有看过迪斯尼游戏？菜单并不是真的存在，只是一些图像（比如说日历或抽屉），如果你仔细阅读它们，就会看到动画。 我有一个女孩的形象（所有的图画都是漫画风格），如果你把她徘徊，我希望女孩迎接你。然后，动画分为不同的步骤： 1）手臂放下，并隐藏在桌子上。有三个图像：女孩，前臂和手（加上手臂的最后部分）。 2）悬停！前臂向上移动，比如说85-90度。 3）前臂停止，但手臂和手的其余部分继续移动（左，右，左右，再次）。想想吧，当你问候某人:)

目前，我只是能够让女孩只移动一次（整个手臂向上移动，但这并不像我想要的那样自然）。如何实现我想要的多重动画？

非常感谢！

P.s.我不想让所有的浏览器都舒服，只是webkit + mozilla，不关心IE。

编辑：

随着时间的推移多重转换呢？像“翻译（0,4em）”和x秒后“旋转（50deg）”？

Answer 1

您可能会考虑查看@keyframes以使用纯CSS实现某些功能，但请记住，您的浏览器支持将限制您的工作。查看caniuse.com，查看细分可能是什么。否则，你正在使用大量的JavaScript，精灵和CSS来编程。 Flash也是一种选择，albiet不是一种流行的游戏，而是像你所描述的那样经常在游戏网站上找到。

因此，像这样的CSS：

//webkit only here: 
@-webkit-keyframes fade-in { 
0% { 
    -webkit-transform: ease-in-out(0); 
opacity: 0; 
} 
50% { 
    opacity: 0; 
} 
100% { 
-webkit-transform: ease-in-out(1); 
opacity: 1; 
} 
} 

#el{ 
-webkit-animation-duration: 1.5s; 
-webkit-animation-name: fade-in; 

}