Подскажите, как задать transition так, чтобы зелёное меню плавно выплывало влево? HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Калькулятор</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<table class="numbersTable" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="5" class="inpCell"><input type="number" id="jopa" class="outputPanel" readonly></td>
</tr>
<tr>
<td class="number">7</td>
<td class="number">8</td>
<td class="number">9</td>
<td rowspan="4" class="tableCell"><table class="operTable" cellpadding="0" cellspacing="0">
<tr>
<td>DEL</td>
</tr>
<tr>
<td>÷</td>
</tr>
<tr>
<td>×</td>
</tr>
<tr>
<td>-</td>
</tr>
<tr>
<td>+</td>
</tr>
</table></td>
<td rowspan="4" class="greenStringCell"><div class="greenString">
<table>
</table>
</div></td>
</tr>
<tr>
<td class="number">4</td>
<td class="number">5</td>
<td class="number">6</td>
</tr>
<tr>
<td class="number">1</td>
<td class="number">2</td>
<td class="number">3</td>
</tr>
<tr>
<td class="number">,</td>
<td class="number">0</td>
<td class="equal">=</td>
</tr>
</table>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
CSS
* {
font-family: 'Roboto', sans-serif;
}
body {
background-image: url(images/background.jpg);
background-size: 100%;
font-family: 'Roboto', sans-serif;
align-items: center;
}
.container {
position: absolute;
height: 570px;
width: 288px;
border: 2px solid grey;
padding: 0;
margin: 0;
align-items: center;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.numbersTable {
height: 100%;
width: 100%;
text-align: center;
font-size: 34px;
font-family: sans serif;
font-weight: 300;
background-color: white;
}
.outputPanel {
font-size: 43px;
height: 145px;
width: 100%;
padding: 0;
margin: 0;
outline: none;
border: none;
-webkit-appearance: none;
-webkit-rtl-ordering: none;
-webkit-writing-mode: none;
border-bottom: 2px solid grey;
-moz-box-shadow:0 0 10px #000;
}
td {
border: 0px solid black;
}
tr {
border: 0px solid black;
}
.inpCell {
height: 145px;
}
.operTable {
background-color: rgba(255, 255, 160, 0.8);
border: 0px solid black;
width: 100%;
height: 100%;
font-size: 19px;
}
.tableCell {
width: 20%;
}
.greenStringCell {
width: 7.5%;
height: 100%;
}
.greenString {
display: flex;
height: 100%;
background-color: rgba(30, 255, 137, 1);
}
.active {
/*height: 425px;
right: 0%;
position: absolute;
bottom: 0%;
width: 216px;
z-index: 1;
transition: .2s;
*/}
.greenString:hover {
transition: 0.2s;
height: 425px;
right: 0%;
position: absolute;
bottom: 0%;
width: 216px;
}