CSS3過渡是一種讓元素從一種狀態(tài)平滑地過渡到另一種狀態(tài)的效果。在CSS3中，過渡的觸發(fā)機(jī)制有三種：屬性、偽類和偽元素。

/* 通過屬性觸發(fā)過渡效果 */
.box {
background-color: #ccc;
transition: background-color 1s ease;
}
.box:hover {
background-color: #f00;
}
/* 通過偽類觸發(fā)過渡效果 */
.box {
opacity: 1;
transition: opacity 1s ease;
}
.box:active {
opacity: 0.5;
}
/* 通過偽元素觸發(fā)過渡效果 */
.box {
position: relative;
}
.box::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #f00;
transition: width 1s ease;
}
.box:hover::before {
width: 100%;
}

通過屬性觸發(fā)的過渡效果，需要指定需要過渡的屬性和過渡的時(shí)間、速度曲線等，只有指定的屬性值發(fā)生改變時(shí)，過渡效果才會(huì)觸發(fā)。

通過偽類觸發(fā)的過渡效果，需要通過事件觸發(fā)該偽類，才能觸發(fā)過渡效果。比如，通過:hover觸發(fā)的過渡效果，只有在鼠標(biāo)懸停在元素上時(shí)，才會(huì)觸發(fā)過渡效果。

通過偽元素觸發(fā)的過渡效果，需要添加一個(gè)偽元素來作為觸發(fā)器，比如:before或:after。在這個(gè)偽元素上添加必要的樣式和過渡效果屬性，當(dāng)元素狀態(tài)改變時(shí)，偽元素就會(huì)觸發(fā)過渡效果。

總的來說，通過屬性、偽類和偽元素觸發(fā)的過渡效果具有各自的優(yōu)點(diǎn)和應(yīng)用場(chǎng)景，開發(fā)者可以根據(jù)具體需求選擇適合的觸發(fā)方式。