CSS3多重动画效果

Question

我要建立一个以 child 为目标的网站，我希望有一些图像可以在悬停或点击时设置动画(仅限 CSS，只是为了好玩，我已经知道如何在 JS 中实现)。 你见过迪士尼游戏吗？菜单实际上并不存在，您只有一些图像(比方说日历或抽屉)，如果您浏览它们就会动画。 我有一个女孩的形象(所有的图画都是漫画风格的)，如果你将她悬停在她身上，我希望这个女孩向你致意。然后，动画分为不同的步骤: 1) ARM 放下，藏在 table 旁。一共有三个图像:女孩、前臂和手(加上 ARM 的最后一部分)。 2)悬停!前臂向上移动，比方说 85-90 度。 3) 前臂停止，但 ARM 的其余部分和手继续移动(左、右、左、右，然后再移动)。想一想，当你问候某人时:)

目前我只能让女孩移动一次(整个 ARM 向上移动，但这并不像我想要的那样自然)。如何实现我想要的多个动画？

非常感谢!

附言我不想让它适应所有浏览器，只是 webkit+mozilla，不关心 IE。

编辑:

随时间的多次转换呢？像“translate(0,4em)”和 x 秒后“rotate(50deg)”之类的东西？

Answer 1

您可能会考虑查看@keyframes 以使用纯 CSS 实现某些功能，但请记住您的浏览器支持会限制您。查看 caniuse.com 以查看故障可能是什么。否则，您正在考虑使用大量 javascript、 Sprite 和 CSS 对其进行编程。 Flash 也始终是一种选择，虽然不是很流行，但像您描述的那样经常出现在游戏网站上。

所以在 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; 

}