html - 如何创建 facebook 喜欢使用 css 加载骨架？

Question

我是创建动画的新手……我想创建类似 facebook 的动画来加载屏幕。

我想做什么？我有一张卡片，我想通过使用 facebook 来表示加载状态，比如加载（带有动画的骨架屏幕）类为“图像”的 div。

代码在这里添加 https://codepen.io/harika123/pen/vYEdoOY 下面是代码，

.container {
    display: flex;
    flex-direction: row;
 }
 .card { 
     box-shadow: 3px 3px 5px 0 rgba(0, 0,0, 0.15);
     width: 309px;
     position: relative;
     top: 200px;
     left: 250px;
  }
  .image { 
      display:flex;
      width: 309px;
      height: 176px;
      background-color: #cccccc;    
  }
  .loading {
      position: relative;
      top: 80px;
      left: 125px;
      width: 82px;
      height: 20px;
      background-color: white;
      border-radius: 10px;
  }
  h4 {
      height: 30px;
  } 
  .text {
      padding-left: 16px;    
  }
  .footer {
      display: flex;
      width: 309px;
      height: 72px;
      background-color: white;
  }

 <div class="container">
     <div class="card">
         <div class="image">
             <div class="loading">
                 <div class="text">loading</div>
                 <div class="button"></div>
             </div>
         </div>
         <div class="footer">
             <div class="info">
                 <h4>Card Name</h4>
             </div>
         </div>
    </div>
</div>

我已尝试添加动画但无法正常工作（查看 codepen 中的代码）。我怎样才能添加像 facebook 加载骨架屏幕这样的动画。对于 facebook，我们看到从左到右的闪烁效果。我希望它使用 90 度线性渐变。有人可以帮我解决这个问题。谢谢。

标签： htmlcss