觸發方式有：1、透過偽類元素「:hover」觸發，語法「元素{transition:屬性過渡時間}元素:hover{屬性:屬性值}」；2、透過「element.classList .add("元素名稱")」語句觸發css過渡效果。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
第一種： 透過偽類元素觸發
<style>
.box{
width: 100px;
height: 100px;
background-color: blueviolet;
transition: width 1s linear .5s;
}
.box:hover{
width: 400px;
}
</style>
<p class="box">
</p>第二種： 透過JS觸發
透過js添加必須有一定的延遲(延遲去掉無效果)來改變元素的樣式
<style>
.box{
width: 100px;
height: 100px;
background-color: blueviolet;
transition: width 1s linear .5s;
}
.box1{
width: 400px;
}</style>
<p class="box">
</p>
<scrpit>
setTimeout(() => {
let element = document.getElementsByClassName('box')[0];
element.classList.add('box1')
}, 1) </scrpit>推薦學習：css影片教學
#以上是使用css過渡有哪些觸發方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
