我可以向前和向后运行动画吗？

Question

当我选中一个复选框时，我正试图让div在正常方向上运行，但是当它没有时，反向运行。我记得昨天读过一些关于只能动画一次的东西，但我记不清究竟是什么了。

以下是代码：

@keyframes move {
	0% {
		bottom: 0%;
		opacity: 0;
	}

	80% {
		bottom: 53%;
		opacity: .8;
	}

	100% {
		bottom: 50%;
		opacity: 1;
	}

}

.containers {
	width: 100px;
	height: 100px;
	position: absolute;
	border-radius: 100%;
	animation-duration: .5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

#smoothCheck:checked ~ #container_1 {
	bottom: 0%;
	opacity: 0;
	background-color: #38D1C2;
	animation-name: move;
}

<input type="checkbox" id="smoothCheck"> I make a smooth entrance

<div id="container_1" class="containers">
		</div>

每当我尝试“smoothCheck：not（checked）....试图在取消选中复选框时反向运行动画时，它会覆盖它。

我有什么方法可以实现这个目标吗？