html - CSS选择器-一次触发即可播放多个动画

如何在一个悬停触发器上获得多个div过渡/动画？

在此处查看更新：http://jsfiddle.net/hecyn/9/ >> CSS-Line：23
我要在这里所做的就是让.inner和.wrap2旋转一个.wrap：hover。当我添加“ +”选择器时，它不起作用。我怎样才能更好地解决这个问题。

主要问题：那么我该如何在下面写这个：

#container:hover + #cube1 + #cube2 + #cube3 { background-color: yellow; }

第二个问题：上面没问题，但是最终我还是想通过CSS来实现这一点：

#:hoverOverSomething then{
   Do this thing;
   Do this other thing;
   Do this next thing;
}

耐心等待，对于CSS动画来说还算是很少的新知识了……网络变得乌云密布，没有特定的简单信息。干杯。

最佳答案

我认为您可以尝试关键帧动画：https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

像这样：

.wrap:hover {
    animation: test-animation 2s linear;
}

@keyframes test-animation {
  //You can add as many ranges as you like from 0% to 100%
  0%   { opacity: 0; }
  50%   { transform: scale(1.5); }
  100% { opacity: 1; }
}

https://jsfiddle.net/maLt4dda/

关于这个问题：


  如何在一个悬停时获得多个div过渡/动画
  触发？


您的想法很好，但是代码中有一个错误。它应该是.wrap:hover .inner,.wrap:hover + .wrap2而不是.wrap:hover .inner + .wrap2

http://jsfiddle.net/ow86d5vg/