<div class="block1"></div>
<p>兩個 div,都延遲2秒執行,但下方的 div,設定  animation-fill-mode 為 backwards,則一開始就會顯示 0% 時的狀態(即顯示紅色)。</p>
<div class="block3"></div>
/* 基本樣式 */
div.block1, div.block3{
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

/* 建立一個改變顏色的動畫效果 */
@keyframes change_color {
  0% {
    background-color: #ff0000;
  }
  100% {
    background-color: #0000ff;
  }
}

/* 都套用相同動畫效果 */
div.block1, div.block3{
  animation-name: change_color;
  animation-duration: 3s;
  animation-delay: 2s;
}

div.block3{
  animation-fill-mode: backwards;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.