css3過渡有2種觸發方式：1、透過偽類元素觸發，包括「:hover」、「:focus」、「:checked」等方式；2、透過JS觸發，使用js或Jquery程式碼修改CSS屬性，進而觸發transition的漸進。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
transition
transition是CSS3最簡單的動畫, 當元素的屬性發生改變能夠以漸變的方式呈現出來; 如下程式碼是w3c上的一個範例,加上了transition的結果就是在hover時, 長度會逐步增加到300px.
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>css3過渡的觸發方式
##第一種： 通過偽類元素觸發，包括hover、focus、checked等方式
<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或Jquery直接修改CSS屬性JS觸發方式應當是它的class改變以至於能夠得到新的樣式。 我的理解是必須元素發生什麼改變使得它有了一些不同從而獲取到一些新的屬性，對於偽類觸發是這樣，對於JS觸發方式應當是它的class發生改變以至於能夠得到新的樣式。 透過為p添加newclass的類別使得p發生改變取得到該類， 能夠觸發transition的漸變。<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影片教學）
以上是css3過渡有哪些觸發方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
