如何在悬停单个div时立即执行两个CSS动画？

Question

我试图在悬停一个div时立刻执行两个动画。

一个动画是将图像缩放到50％。另一个动画是将文本从0-100％缩放，并将其从原始位置向上移动10px。

我已经使用下面的代码成功创建了缩放图像的动画，但是我遇到了编码文本动画的问题。

    -webkit-transform: scale(.5);

这是JSFiddle上的工作缩放图像动画： http://jsfiddle.net/ZVScz/

我现在如何实现文本缩放的动画从0-100％并向上移动10px？

提前感谢能够提供帮助的任何人！

Answer 1

您需要使用adjacent selectors CSS选择器elem1 + elem2，其中elem2紧跟在elem1之后，并且他们拥有相同的父级。

我已经在http://jsfiddle.net/ZVScz/1/实现了一些效果，您现在可以根据自己的喜好调整变换。

如果您有任何问题，请随时提出 佛瑞德

Answer 2

尝试使用：#worksContainer:hover #worksText { ... }

为文本补充...动画。