loading畫面 skeleton

coding reference
codepen practice

可再優化: 文字區塊 使用漂亮滾軸

.skeleton 即未渲染前的loading狀態。

• 背景色: 灰色
• 背景圖片: CSS線性漸層 linear-gradient()
• background-size: 寬 高
• background-repeat: 不重複
• background-position: 起始位置
• animation: shine 1s ease-in-out infinite;
  • 動畫的名稱
  • 1s 表示動畫的持續時間為1秒
  • ease-in-out 是動畫的時間函數，用於定義動畫速度變化的方式
  • infinite 則表示動畫會無限循環播放。

@keyframes

@keyframes動畫名稱 {
  to(結束狀態的位置 = 100%) {
    background-position: right -40px top 0;
  }
}