延遲2秒後以每秒鐘換顏色 ( 淡藍 > 紅 > 綠 > 藍 > 淡藍 ), 連續換3輪顏色後停止。

#b2 { animation-name: testAni1; 
      animation-delay: 2s; 
      animation-duration: 4s; 
      animation-iteration-count: 3; }

@keyframes testAni1 {
    0%   {  }
    25%  { background-color: red; 
    50%  { background-color: green; }
    75%  { background-color: blue; }
    100% {  }
}
            

延遲1秒後以每2秒鐘鐘擺的方式晃動1次, 持續不停止。

#b2 { transform-origin: 0 0; 
      animation: testAni2 2s 1s infinite; }

@keyframes testAni2 {
  0%   { transform: rotate(15deg); }
  50%  { transform: rotate(75deg); }
  100% { transform: rotate(15deg); }
}
            

當滑鼠滑入時, 會呈現放大閃爍的紅色光暈。

#b2:hover { cursor: pointer;
            animation: testAni3 1s infinite; }

@keyframes testAni3 {
  50% { box-shadow: 0 0 20px red; }
}