在JavaScript中調(diào)用CSS動(dòng)畫(huà),可以通過(guò)以下步驟實(shí)現(xiàn):
1、定義CSS動(dòng)畫(huà)
在CSS中定義動(dòng)畫(huà),我們可以創(chuàng)建一個(gè)簡(jiǎn)單的旋轉(zhuǎn)動(dòng)畫(huà):
@keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
2、應(yīng)用CSS動(dòng)畫(huà)
將動(dòng)畫(huà)應(yīng)用到需要旋轉(zhuǎn)的元素上,我們可以將動(dòng)畫(huà)應(yīng)用到一個(gè)名為myElement
的元素上:
.myElement { animation: rotation 2s linear infinite; }
3、調(diào)用CSS動(dòng)畫(huà)
在JavaScript中,我們可以使用element.style
屬性來(lái)調(diào)用CSS動(dòng)畫(huà),我們可以調(diào)用名為myElement
的元素上的旋轉(zhuǎn)動(dòng)畫(huà):
var myElement = document.getElementById('myElement'); myElement.style.animation = 'rotation 2s linear infinite';
通過(guò)以上步驟,我們就可以在JavaScript中調(diào)用CSS動(dòng)畫(huà)了,需要注意的是,如果元素已經(jīng)應(yīng)用了其他動(dòng)畫(huà),我們需要先獲取其他動(dòng)畫(huà)的信息,然后再添加新的動(dòng)畫(huà),我們也可以調(diào)用其他已經(jīng)定義好的動(dòng)畫(huà),只需要將動(dòng)畫(huà)名稱替換成對(duì)應(yīng)的名稱即可。