使用 css 将 div 动画化到视图中

Question

我正在尝试创建一个动画媒体库。我有一个图像网格，当我选择一个单独的图像时，我希望它显示在顶部作为主图像。我想用 css 对此进行动画处理，以产生主图像位于顶部而其他图像被“向下推”的效果，然后，当我关闭主图像时，其他图像再次向上推。

    <div>
<div class="main-image-container">
  <div class="main-image">
  Main Image
  </div>
</div>
<div class="media-grid">
  <div class="image">Image</div>
  <div class="image">Image</div>
  <div class="image">Image</div>
  <div class="image">Image</div>
  <div class="image">Image</div>
  <div class="image">Image</div>
  <div class="image">Image</div>
  <div class="image">Image</div>
  <div class="image">Image</div>
  <div class="image">Image</div>
</div>
</div>


.image {
  height: 200px;
  width:200px;
  border: 2px solid black;
}

.media-grid {
     margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 10px 10px;
}

.main-image-container {
  display: flex;
  justify-content: center;
   height: 300px;
}

.main-image {
  width: 250px;
  height: 250px;
  border: 2px solid orange;
}

链接到 jsfiddle - https://jsfiddle.net/fcbyg0uv/14/

Answer 1

这种动画目前在标准 css 中是不可能的。考虑使用 bootstrap，或者简单地制作你自己的 javascript 动画。