思路如下：
aimation 设置执行动画和 时间 以及是否循环
@keyframes 定义动画
接着 默认动画的div隐藏
点击执行事件 display block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" />
<script src="https://cdn.bootcss.com/jquery/2.1.3/jquery.js" ></script>
<script src="https://www.layuicdn.com/layui/layui.js" type="text/javascript"></script>
</head>
<body>
<style type="text/css">
.layui-container{width: 40%;height: 400px;background-color: red;display: none;transform:translateY(100px);
animation: luandong .5s;
}
@keyframes luandong{
0%{transform:translateY(-300px);}
50%{transform:translateY(-100px);}
100%{transform:translateY(100px);}
}
</style>
<button class="layui-btn layui-btn-danger a">按钮</button>
<button class="layui-btn layui-btn-disabled">按钮2</button>
<div class="layui-container b">
wqeqwe
</div>
<script type="text/javascript">
$(".a").click(function () {
$(".b").css("display","block")
$("body").css("background","#c3c3c3")
})
$(function function_name(argument) {
// $(".a").click()
})
</script>
</body>
</html>