CSS3过渡效果有两个重要的组成部分：属性和时间。属性指需要参与过渡的CSS属性，例如背景颜色、宽度、高度等等。时间则是CSS3过渡效果的持续时间、延迟时间、过渡函数等属性。在定义CSS3过渡效果时，需要通过transition属性来指定需要过渡的属性和时间，例如：
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 1s ease-in-out;
}上述代码定义了一个尺寸为100px的红色方块，同时指定了宽度属性在1秒内进行过渡效果，过渡函数为ease-in-out。
触发CSS3过渡效果有两种方式：1. 页面加载时直接设置默认CSS属性值；2. 通过交互触发属性值的变化，例如鼠标悬浮、点击等等。
对于第一种方式，需要在HTML代码中设置元素的默认CSS属性值，例如：
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 1s ease-in-out;
}
<div class="box"></div>在这个例子中，大家定义了一个类名为box的元素，宽度为100px、高度为100px、背景颜色为红色。同时，大家为该元素设置了过渡效果，宽度在1秒内从100px变为其他数值时会有平滑过渡效果。
对于第二种方式，大家需要使用CSS3的伪类选择器，例如:hover、:active等等，来进行交互操作的触发，例如：
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 1s ease-in-out;
}
.box:hover {
width: 200px;
}在这个例子中，大家定义了一个类名为box的元素，宽度为100px、高度为100px、背景颜色为红色。同时，大家为该元素设置了过渡效果，宽度在1秒内从100px变为其他数值时会有平滑过渡效果。当鼠标悬浮到该元素上时，宽度会从100px过渡到200px。
以上就是CSS3过渡效果的机制以及触发方式的介绍，希望对网页设计师们有所帮助。