<div class="block1"></div>
<div class="block2"></div>
/* 基本樣式 */
div.block1, div.block2{
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: inline-block;
}

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

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

/*  */
div.block2{
  animation-fill-mode: forwards;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.