HTML5多个过渡动画怎么在鼠标滑动的时候同时显示，也就是不同对象的动画同时显示效果，本人初学……

Question

如下图，当鼠标飘过的时候，3个box同时显示动画效果
目前我只能实现单个box显示动画，用了transition、transform，hover等属性

Answer 1

要同时显示就要同时触发动画，可以在HTML上把这3个box组织在一处，放在同一个父容器里，再用CSS同时触发。示例：

<div class="father">
<div class="box1">0.5s</div>
<div class="box2">1s</div>
<div class="box3">2s</div>
</div>

同时触发的CSS：

.father:hover > .box1 {/* box1动画 */}
.father:hover > .box2 {/* box2动画 */}
.father:hover > .box3 {/* box3动画 */}

追问

我用了ul项目列表，然后里面用3个li,同样的方法可以实现吗？

追答

当然可以，道理是一样的

Answer 2

现在学习web前端，html5开发还是很火的，缺口大，前景好，简单能学会的，先去网上找点基础视频看
，Mars的视频比较好讲得很全面。当然学习要靠自觉性，坚持学习，兴趣是最好的老师。