1樓：匿名使用者
具體可以參考css.doyoe.com 這個手冊有詳細介紹transition 是過渡
背景色過渡
背景色過渡
背景色過渡
背景色過渡
背景色過渡
transfrom 是變換
transform:matrix(0,1,1,1,10,10)transform:translate(5%,10px)transform:
translate(-10px,-10px)transform:translatex(20px)transform:translate(20px)transform:
translatey(10px)transform:translate(0,10px)transform:rotate(-15deg)transform:
rotate(15deg)transform:scale(.8)
transform:scale(1.2)
transform:skew(-5deg)transform:skew(-5deg,-5deg)animate 是動畫
css3 animations
css3 animations
css3 animations
2樓：
hahazaixian寫的很詳細，具體自己試一下就知道區別了
css3中的transform可以用jquery中的animate實現嗎？
3樓：郭某人來此
好像 jquery animate不支援-webkit-transform，我是試了很多遍都不成功！jquery.css()還支援，
.addw
.add
然後用jquery.addclass("addw").addclass("add");這樣就可以了！上stack overflow上收的也多半是這種辦發
4樓：匿名使用者
可以 但是明明能用transform解決的東西，為什麼要用jq呢？ 有些本末倒置了~
5樓：free小_貓
**貼上來看看吧，
transform相容性不好，需要寫很多組，你jq裡怎麼寫的，還有你想達到什麼效果，未必一定要把transform用jq來寫的，寫在css裡，另起乙個類名，切換類名也可以啊
css3 animation與jquery animate()區別是什麼？
6樓：匿名使用者
1、ducss3 使用 gpu，jquery 使用 cpu2、css3 比 jquery 更流暢，更快zhi，更效率3、jquery 支援dao所有遊覽器回
4、css3(animation, transition) 不支援 ie6, 7, 8, 9
5、css3 animation 支援的 css 屬性比 jquery 多
.....
.望採納答
7樓：我4蝸牛先生
css3 animation與baijquery animate()區別在於du實現機制不zhi
同：1.css3中的過渡和animation動畫都是
dao基於css實現機制的，屬於css範疇之版內，並沒有涉及到任何語言權操作。效率略高與jquery中的animate()函式，但相容性很差。
2.jquery中的animate()函式可以簡單的理解為css樣式的「逐幀動畫」，是css樣式不同狀態的快速切換的結果。效率略低於css3動畫執行效率，但是相容性好。
推薦在相容性要求不是很高的情況下盡量使用css3動畫，在需要相容性很好並且有複雜的事件響應的情況下使用jquery中的animate()函式。
css3的-webkit-animation動畫執行後會變回原來的樣子，怎麼保留住動畫最後的狀態呢？
8樓：久念義務教育
保留住動畫的最後狀態2113，在animation後面加上forwards就可5261以了**如下：4102
-webkit-animation
注意：動畫如果只執行一次，1653通過css無法辦到，可以把動畫結束時的樣式寫入乙個class中，用js在動畫結束時把class賦給這個物件。
擴充套件資料
css animation 與 css transition 有何區別
一、指代不同
1、animation ：屬性是乙個簡寫屬性，用於設定六個動畫屬性。
2、transition：屬性是乙個簡寫屬性，用於設定四個過渡屬性。
二、特點不同
1、animation ：animation: name duration timing-function delay iteration-count direction，規定需要繫結到選擇器的 keyframe 名稱。
規定完成動畫所花費的時間，以秒或毫秒計。
2、transition：transition: property duration timing-function delay，規定設定過渡效果的 css 屬性的名稱。
規定完成過渡效果需要多少秒或毫秒。
9樓：程豆豆
animation-fill-mode : forwards //設定物件狀態為動畫結束時的狀態
animation-fill-mode
語法：animation-fill-mode：none | forwards | backwards | both [ ,
none | forwards | backwards | both ]*
預設值：none
適用於：所有元素，包含偽物件:after和:before
繼承性：無
取值：none：
預設值。不設定物件動畫之外的狀態
forwards：
設定物件狀態為動畫結束時的狀態
backwards：
設定物件狀態為動畫開始時的狀態
both：
設定物件狀態為動畫結束或開始的狀態
說明：檢索或設定物件動畫時間之外的狀態
如果提供多個屬性值，以逗號進行分隔。
對應的指令碼特性為animationfillmode。
這個是最簡單的方法，
也可以偵聽動畫結束事件，給元素加個class類名，這個class定義的就是元素結束時的狀態的css樣式
10樓：匿名使用者
-webkit-animation 最後加這個forwards 就可以了
11樓：水sd滴
加上forwards；
如：animation: rollin .6s .2s forwards;
12樓：
直接把元素設定成最後的狀態
13樓：匿名使用者
動畫如果只執行一次，光通過css無法辦到，可以把動畫結束時的樣式寫入乙個class中，用js在動畫結束時把class賦給這個物件。
14樓：匿名使用者
+['iuyjurk
css3 實現動畫效果，怎樣使他無限迴圈動下去？
15樓：劉美蘭
主要需要使用 -webkit-animation如：-webkit-animation:gogogo 2s infinite linear ;
其中gogogo是自己定義的動畫幀，2s是整個動畫的秒數，infinite是永久迴圈 linear是線性變化 (step-end則是無線性變化，直接輸出結果)
**如下：
css:
@-webkit-keyframes gogogo50%100%
}.loading
16樓：匿名使用者
css3動畫之無限迴圈進度條無限迴圈進度條**示例比音的部落格 在animation出來之前,動畫效果需要通過js實現,但是
17樓：丶song記油條條
滑鼠懸停，圖示會一直不停旋轉。
如果實現圖示一直不停旋轉，則需要使用animation動畫。先製作動畫的各個關鍵幀，然後在圖示中運用這一動畫。
具體操作如下：
jquery的animate方法執行 css3 5
18樓：每週
好像 jquery animate不支援-webkit-transform，我是試了很多遍都不成功！jquery.css()還支援，
.addw
.add
然後用jquery.addclass("addw").addclass("add");這樣就可以了！上stack overflow上收的也多半是這種辦發
19樓：李林程式設計師
$(function());});
css3動畫**後如何停止在最後的狀態 10
20樓：匿名使用者
css3 裡面 animation下有個animation-fill-mode 設定動畫完成後的狀態，預設是none 設為forwards 就可以在動畫完成後定格在動畫最後一幀
21樓：任然是我
這個可以婉轉的實現，比如預設就讓它在left:200，而且預設是隱藏看不見的，然後
0%-5%,
5%-10%
100%
22樓：匿名使用者
animation-fill-mode: forwards;
如何停止css3的動畫
23樓：神馬事名字
首先請樓主看乙個動畫**：（不是什麼高大上的效果，只是簡單的顏色變化）@-webkit-keyframes indexframe 50% 100% }#index_href
為了方便，也就寫了相容chrome的css3樣式，其他的換個字首就好，在這裡就不過多的說了。
2、為這個a（id=「index_href」）新增乙個偽類：
這是原本準備新增的：
#index_href:hover
但是執行之後發現動畫因為設定的是infinite //無限迴圈的效果
所以當需要觸發偽類的效果時，動畫還是會依然進行，這時候就需要停止之前的無限迴圈的動畫了。
用css3的思路就是重新設定乙個偽類的動畫，把前面的動畫給覆蓋了。這樣的話，我們就可以把偽類要改變的東西設定為動畫效果，然後直接覆蓋上去就行了。**如下：
#index_href:hover@-webkit-keyframes indexend 100% }
這裡重新定義乙個動畫，命名為indexend，然後新增到hover偽類中去，設定動畫的過渡時間為0s，這樣可以達到瞬間變道動畫的結束樣式，以達到hover樣式的直接改變。這樣就成功的實現了之前動畫的停止與後來樣式的變化。
24樓：匿名使用者
1、首先看看乙個動畫**：（不是什麼高大上的效果，只是簡單的顏色變化）
@-webkit-keyframes indexframe 50% 100% } #index_href
為了方便，也就寫了相容chrome的css3樣式，其他的換個字首就好，在這裡就不過多的說了。
2、為這個a（id=「index_href」）新增乙個偽類：
這是原本準備新增的：
#index_href:hover
但是執行之後發現動畫因為設定的是
infinite //無限迴圈的效果
所以當需要觸發偽類的效果時，動畫還是會依然進行，這時候就需要停止之前的無限迴圈的動畫了。
用css3的思路就是重新設定乙個偽類的動畫，把前面的動畫給覆蓋了。這樣的話，我們就可以把偽類要改變的東西設定為動畫效果，然後直接覆蓋上去就行了。**如下：
#index_href:hover @-webkit-keyframes indexend 100% }
這裡重新定義乙個動畫，命名為indexend，然後新增到hover偽類中去，設定動畫的過渡時間為0s，這樣可以達到瞬間變道動畫的結束樣式，以達到hover樣式的直接改變。
這樣就成功的實現了之前動畫的停止與後來樣式的變化。
css和css3有什麼區別，CSS和CSS3有什麼區別
就是多了很多新的屬性，但向後相容css2和css，具體可以去w3school上看 http www.w3school.com.cn css3 css3 intro.asp 增加了點屬性，丟棄了點兒屬性，注意用法的改變就行了。沒什麼大區別，會css看看css3就行。 都是網頁樣式code，不同的在於c...
css3 漸變怎麼實現，CSS3怎麼做出過渡漸變效果
針對不同瀏覽器有不同的字首，基本還是相似的，下面的意思是線性漸變，從上方開始，從黑色漸變到白色 webkit linear gradient top,000,fff moz linear gradient top,000,fff o linear gradient top,000,fff 也可以加一...
css3 rotate可以反方向旋轉嗎
千鋒教育 css3新增的乙個控制元素旋轉屬性的函式是rotate 不要懷疑，它的確是乙個 的函式，他的使用很類似與js中的函式 同之前所講過的translate和scale，他也分為2d和3d的旋轉，差別就是z軸的旋轉。現在我們來看例項，如下 demo的div裡面有三個div，最終實現的效果如下圖 ...