Animation Generator是一款可以安裝到谷歌瀏覽器上使用并支持所有chrome內(nèi)核瀏覽器操作的開(kāi)發(fā)者工具實(shí)時(shí)預(yù)覽功能的強(qiáng)大插件,使用這款插件能讓您的代碼在未保存的情況下就能預(yù)覽效果。是集成在開(kāi)發(fā)者工具Devtools的一個(gè)功能。它能幫助開(kāi)發(fā)者迅速為原本死氣沉沉的頁(yè)面上的元素添加動(dòng)畫(huà)和實(shí)時(shí)預(yù)覽,并生成兼容多瀏覽器的CSS動(dòng)畫(huà)代碼。

操作步驟
1、在HTML中,為需要添加動(dòng)畫(huà)的元素添加前綴為"anim-"的類(lèi),如anim-arrow。
2、打開(kāi)開(kāi)發(fā)者工具,使用放大鏡選中帶有"anim-"前綴的類(lèi)的元素。
3、在Style,Event Listener等標(biāo)簽欄切換到Animation Generator。
4、現(xiàn)在開(kāi)始給你的元素添加動(dòng)畫(huà)吧。
使用方法
方法一:.crx文件格式插件安裝
1、首先用戶(hù)點(diǎn)擊谷歌瀏覽器右上角的自定義及控制按鈕,在下拉框中選擇設(shè)置。
2、在打開(kāi)的谷歌瀏覽器的擴(kuò)展管理器最左側(cè)選擇擴(kuò)展程序或直接輸入:chrome://extensions/
3、找到自己已經(jīng)下載好的Chrome離線(xiàn)安裝文件xxx.crx,然后將其從資源管理器中拖動(dòng)到Chrome的擴(kuò)展管理界面中,這時(shí)候用戶(hù)會(huì)發(fā)現(xiàn)在擴(kuò)展管理器的中央部分中會(huì)多出一個(gè)”拖動(dòng)以安裝“的插件按鈕。
4、松開(kāi)鼠標(biāo)就可以把當(dāng)前正在拖動(dòng)的插件安裝到谷歌瀏覽器中去,但是谷歌考慮用戶(hù)的安全隱私,在用戶(hù)松開(kāi)鼠標(biāo)后還會(huì)給予用戶(hù)一個(gè)確認(rèn)安裝的提示。
5、用戶(hù)這時(shí)候只需要點(diǎn)擊添加按鈕就可以把該離線(xiàn)Chrome插件安裝到谷歌瀏覽器中去,安裝成功以后該插件會(huì)立即顯示在瀏覽器右上角(如果有插件按鈕的話(huà)),如果沒(méi)有插件按鈕的話(huà),用戶(hù)還可以通過(guò)Chrome擴(kuò)展管理器找到已經(jīng)安裝的插件。
方法二:文件夾格式插件安裝
1、首先用戶(hù)點(diǎn)擊谷歌瀏覽器右上角的自定義及控制按鈕,在下拉框中選擇設(shè)置。
2、在打開(kāi)的谷歌瀏覽器的擴(kuò)展管理器最左側(cè)選擇擴(kuò)展程序。
3、勾選開(kāi)發(fā)者模式,點(diǎn)擊加載已解壓的擴(kuò)展程序,將文件夾選擇即可安裝插件。