css - 如何使 div 过渡不那么刺耳？

Question

我建立了一个画廊，当用户单击图像时，它会变成全屏。但是，全屏图像过渡非常刺耳，我不确定如何使其平滑。我试过使用transition选择器，但没有运气。有没有人对如何最好地制作动画有任何建议？这是我的代码：

body {
  margin: 0em 9em;
}

h1 {
  font-family: 'Russo One', sans-serif;
  text-align: center;
  font-size: calc(90px + 1.5vw);
}
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image-container {
  flex: 1 1 30%;
  margin: 1em;
  max-height: 40em;

  box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  align-content: center;
  object-position: center;
}

#fullpage {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: contain;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-color: black;
}

<div class="container">
      <h1>Photo Gallery</h1>
      <div class="gallery"></div>
      //When the user clicks an image,
      //it becomes the background of this
      //div and the display becomes block
      <div id="fullpage">
        <button
          type="button"
          data-close
          onclick="fullpage.style.display='none'"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    </div>

标签： csscss-animations