思路如下：
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>