Transition / Transform CSS属性未按预期插入

Question

所以，我的目标是在满足状态（React）值后立即将div幻灯片放进去，但是它所做的只是突然出现，而不是从屏幕外插入。

.network-message {
	position: relative;
	top: -67px;
	width: 100%;
	height: 5vh;
	display: flex;
	justify-content: center;
	background-color: red;
	color: #fff;
	font-size: calc(15px + (17 - 15) * (100vw - 1440px) / (2560 - 1440));
	align-items: center;
	transition: transform 1s ease-in;
	transform: translateY(67px);

	.network-button {
		margin-left: 2em;

		button {
			border: none;
			padding: 0.5em 1.5em;
			background-color: #254294;
			color: #fff;
			font-size: calc(11px + (13 - 11) * (100vw - 1440px) / (2560 - 1440));
			cursor: pointer;
		}
	}
}

<div class='network-message'>
  Looks like Microsoft's CRM is down at the moment. Please be patient
  while they work to resolve the issue.
  <div class='network-button'>
    <button type='button'>
      OK
    </button>
  </div>
</div>