Здраствуйте, помогите пожалуйста понять почему не работает анимированое удаление в коде
<!DOCTYPE html>
<body>
<div class="container">
<div id="del" onclick="del()"></div>
</div>
</body>
<style>
.container {
width: 30vmin;
background: green;
transition: all 5s ease;
}
#del {
width: 10vmin;
height: 10vmin;
background: red;
}
</style>
<script>
function del() {
document.getElementById("del").style = "display:none";
}
</script>
</html>
И как ето реализовать (я представляю еот как резкое исчезновение красного квадрата и медленное уменшение зеленого)