cssのtransitionについて

html,css,javascriptにてメニューを作ったのですが、transitionを使ってそれぞれのメニューをクリックした時の動きを滑らかにしたいと考えています。
ただ、cssの何処にどのようにtransitionを入れれば実装できるのかが分かりません。
その点を教えて頂きたいです。

html
1
2<!doctype html>
3<html>
4	<head>
5
6		<meta charset="UTF-8">
7		<meta name="description" content="DESCRIPTION">
8		
9		
10		<link rel="stylesheet" href="css/style.css">
11		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
12		
13		<meta name="viewport" content="width=device-width, initial-scale=1">
14		
15		<title>title</title>
16
17	</head>
18	
19	<body>
20
21
22			<h1>sample menu</h1>
23			
24			<div class="nav">
25				<ul id="test_ul">
26					<li>test1</li>
27					<li>test2</li>
28					<li>test3</li>
29					<li>test4</li>
30				</ul>
31			</div>
32
33
34			<div id = "all">
35				<div class="menu">
36					<ul style="display: none;">
37							<li>a</li>
38							<li>test2</li>
39							<li>test3</li>
40							<li>test4</li>
41					</ul>
42				</div>
43
44				<div class="menu">
45					<ul style="display: none;">
46							<li>b</li>
47							<li>test2</li>
48							<li>test3</li>
49							<li>test4</li>
50					</ul>
51				</div>
52
53				<div class="menu">
54					<ul style="display: none;">
55							<li>c</li>
56							<li>test2</li>
57							<li>test3</li>
58							<li>test4</li>
59					</ul>
60				</div>
61
62				<div class="menu">
63					<ul style="display: none;">
64							<li>d</li>
65							<li>test2</li>
66							<li>test3</li>
67							<li>test4</li>
68					</ul>
69				</div>
70
71			
72			<script>
73				
74
75				let $test_ul = document.getElementById("test_ul");
76				let $li_list = $test_ul.getElementsByTagName('li');
77				const LENGTH = $li_list.length;
78
79				let $ul_list=document.getElementById("all");
80
81				let $each_display_menu = $ul_list.getElementsByTagName('ul');
82				
83				for(let i=0;i<LENGTH;i++){
84
85					$li_list[i].addEventListener('click',()=>{
86
87						for(let j=0;j<LENGTH;j++){
88							if(j!=i){
89							$each_display_menu[j].style.display = 'none';
90							}
91						}
92
93						if($each_display_menu[i].style.display == 'none'){
94							$each_display_menu[i].style.display = 'block';
95						}else{
96							$each_display_menu[i].style.display = 'none';
97						}
98					});
99
100				}
101
102			</script>
103
104		
105		</div>
106
107	</body>
108</html>
109
110
111

css
1html *{
2    box-sizing: border-box;
3}
4
5body{
6    background-color: lemonchiffon;
7    margin: 0 0 0 0;
8}
9
10
11
12
13
14.nav li{
15
16    display: inline;
17    padding-right: 40px;
18
19}
20.nav ul{
21    background-color: darkturquoise;
22    margin-left: 20px;
23    width: 400px;
24    padding-top: 10px;
25    padding-bottom: 2px;
26}
27
28
29.menu ul{
30
31    padding-top: 3px;
32    background-color: burlywood;
33    margin-left: 40px;
34    margin-right: 40px;
35
36
37}
38