CSS动画：transition触发动画和animation非触发动画

在CSS中，transition属性用于设置一个属性过渡到另一个属性，需要触发某种条件才会开始执行。而animation属性则是在不需要触发任何条件的情况下循环播放的动画。

以下是两种类型的CSS动画示例：

触发（Transition）动画示例：

/* 当元素的类从 .start 变为 .end 时触发宽度变化的过渡动画 */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s;
}
 
.box.end {
  width: 200px;
}

<div class="box"></div>

// 使用JavaScript触发动画
document.querySelector('.box').classList.add('end');

非触发（Animation）动画示例：

/* 无限循环的动画 */
@keyframes growWidth {
  from { width: 100px; }
  to { width: 200px; }
}
 
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: growWidth 2s infinite;
}

<div class="box"></div>

在这个例子中，.box元素将无限循环地增加宽度，不需要任何外部触发条件。