CSS3 动画 animation 使用方法求问

[CSGO]

有没办法让点击一个 div，来执行另一个 div 的动画？ 比如我建立两个 box，一个 box1，一个 box2，box1 比如是按钮。box2 比如是一个菜单。默认 box2 菜单是 height: 0px，看不见，点击 box1 后，box2 的 height: 0px 变成 400px，就能看到点击 box1，box2 打开的效果。但是不是很理解这个是怎么用。

比如：

<style> .box1 { width: 50px; height: 50px; background-color: aqua; position: absolute; right: 10px; top: 5px; } .box2 { width: 100%; background-color: aqua; position: absolute; top: 60px; height: 0px; animation: animation 1s; } @keyframes animation { 0% { height: 0px; } 100% { height: 400px; } } .box1:active{ //执行 animation 动画 } </style>

---

[CSGO]

http://imgup.nl/images/2018/10/22/TIM20181022185149.png

[azh7138m]

https://codepen.io/anon/pen/WaKyVd

只能这个样子了

[Pudge1337]

为何不用 js

[CSGO]

@Pudge1337 还没学 js

[rabbbit]

局限性很大

[sxy62016]

点击可以用 checkbox 的 checked 属性实现

[wly19960911]

@Pudge1337 js 写好动画比 css 要难一点。

[rabbbit]

checked 还能这么用,长见识了

[CSGO]

@rabbbit 图片看不了呢

[Sparetire]

label+checkbox+兄弟元素选择器，隐藏掉 checkbox

[CSGO]

@rabbbit wow!太高阶了，完全看不懂，只好先拿来用了。

[lraining]

$(#box1).click(function(){
$(#box2).animate({height:400},'slow','easeOutSine',null);
});