显示后对“兄弟”元素进行动画处理：无

Question

我正在尝试从头开始编程图片库like this beautiful example，但是在删除一些项目（蓝色方块）后尝试对平滑动画进行编程时卡住了。

在这个CSS动画方面，我是菜鸟，在某些失败的意图之后，我决定在此处寻求建议。

在示例代码中，当您单击按钮时，蓝色方块会删除（显示：无），其余元素会立即重新排列，我想对该动作进行动画处理，最好不要使用jquery，因为我试图避免外部库。

非常感谢您的宝贵帮助。 ：）

function goaway() {
	
	document.getElementById('dissapear').style.display = "none";
	
}

.picture {
	width:100px;
	height:100px;
	margin:15px;
	display: inline-block;
}

.green {
	background-color:green;
}

.blue {
	background-color:blue;
}

.red {
	background-color:red;
}

<h2>Filter DIV Elements</h2> <input type="button" value="click" onclick="goaway()"> <hr>

<div class="picture green" > </div>
<div class="picture green" > </div>
<div class="picture red" > </div>
<div class="picture blue" id="dissapear" > </div>
<div class="picture green" > </div>
<div class="picture green" > </div>
<div class="picture green" > </div>
<div class="picture green" > </div>
<div class="picture green" > </div>