CSS3動(dòng)畫如何設(shè)置滑動(dòng)到當(dāng)屏的時(shí)候才觸發(fā)動(dòng)畫播放？如果你想知道這樣的效果，已經(jīng)下載，你可以拆開看看。我們來(lái)說(shuō)說(shuō)原理吧，這不是純CSS3，只是用CSS3定義動(dòng)畫，]@-Moz關(guān)鍵幀提示{0%{box

CSS3動(dòng)畫如何設(shè)置滑動(dòng)到當(dāng)屏的時(shí)候才觸發(fā)動(dòng)畫播放？

如果你想知道這樣的效果，

已經(jīng)下載，你可以拆開看看。

我們來(lái)說(shuō)說(shuō)原理吧，這不是純CSS3，只是用CSS3定義動(dòng)畫，]@-Moz關(guān)鍵幀提示{

0%{box shadow:0px 0px 0px#F00}]25%{box shadow:0px 0px 8px#F00}]50%{box shadow:0px 0px 0px#F00}]100%{box shadow:0px 0px 8px#F00}]剛才定義的動(dòng)畫。

.提示{

-網(wǎng)絡(luò)工具包-動(dòng)畫：提示1

-moz-動(dòng)畫：提示1

}

當(dāng)然可以使用CSS3。僅僅使用純CSS3，你不能像這樣拖拽和剪切屏幕。這需要JS或JQ來(lái)完成。。。

CSS3動(dòng)畫和js動(dòng)畫各有什么優(yōu)劣？

CSS3動(dòng)畫的優(yōu)點(diǎn)：1。性能會(huì)稍微好一點(diǎn)，瀏覽器會(huì)優(yōu)化CSS3的動(dòng)畫（比如創(chuàng)建一個(gè)新層來(lái)運(yùn)行動(dòng)畫）]2。代碼相對(duì)簡(jiǎn)單，但缺點(diǎn)明顯：1。動(dòng)畫控制不夠靈活。兼容性不好

3。一些動(dòng)畫功能無(wú)法實(shí)現(xiàn)（如滾動(dòng)）動(dòng)畫、視差滾動(dòng)等）JavaScript動(dòng)畫正好彌補(bǔ)了這兩個(gè)缺點(diǎn)。它具有很強(qiáng)的控制能力，可以對(duì)單個(gè)幀進(jìn)行控制和變換。同時(shí)，它編寫精良，與IE6完全兼容，功能強(qiáng)大。但想想CSS動(dòng)畫變換矩陣是C級(jí)計(jì)算，它一定比JavaScript級(jí)計(jì)算快。此外，對(duì)圖書館的依賴也是一個(gè)令人頭痛的問(wèn)題。因此，對(duì)于一些復(fù)雜的動(dòng)畫控制，使用JavaScript將更可靠。在實(shí)現(xiàn)一些小的交互效果時(shí)，多考慮CSS。

如何使用JS停止CSS3里面的animation？

對(duì)于CSS，$（這個(gè)）。CSS（{“animation play state”：“saved”}）暫停動(dòng)畫，并$（this）。CSS（{“animation name”：“”}）將動(dòng)畫名稱留空，這樣就不會(huì)對(duì)動(dòng)畫進(jìn)行調(diào)整，這樣更徹底