CSS3多重动画效果答案

【问题标题】：CSS3 multiple animation effectCSS3多重动画效果
【发布时间】：2012-06-19 08:55:48
【问题描述】：

我要建立一个以儿童为目标的网站，并且我希望有一些图像可以在悬停或点击时进行动画处理（仅限 CSS，只是为了好玩，我已经知道如何在 JS 中做到这一点）。你见过迪斯尼游戏吗？菜单实际上并不存在，您只有一些图像（例如日历或抽屉），如果您浏览它们，它们会产生动画效果。我有一个女孩的图像（所有的图画都是漫画风格的），如果你悬停在她身上，我希望这个女孩向你打招呼。然后，动画分为不同的步骤： 1) 手臂被放下，被桌子隐藏起来。共有三个图像：女孩、前臂和手（加上手臂的最后部分）。 2）悬停！前臂向上移动，比如说 85-90 度。 3）前臂停止，但手臂和手的其余部分继续移动（左，右，左，右，再一次）。想一想，当你打招呼时:)

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

非常感谢！

附：我不想让所有浏览器都这么舒服，只用webkit+mozilla，不关心IE。

编辑：

随着时间的推移多次转换会怎样？像“翻译（0,4em）”和x秒后“旋转（50度）”之类的东西？

【问题讨论】：

标签： css hover css-animations

【解决方案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; 

}

【讨论】：