transition: all 2s;/*設定哪些屬性可以有過渡效果
all：所有的屬性
*//*
注意：並不是所有的屬性都可以過渡
*/transition-property: left, width;
transition-duration: 5s;
/*duration during：在···期間
設定完成過渡所需要的時間
*/transition-timing-function: ease-in;
transition-delay: 3s;
/*delay：延遲
設定過渡的延遲時間
*/
/*宣告乙個動畫
*/@keyframes donghua 40% 60% 80% 100% }
0%這個時間點動畫還沒有開始 等價於from
100% 等價於to
animation-name: ;/*指定呼叫動畫的名稱
*/animation-duration: ;
/*指定動畫完成所需要的時間
*/animation-timing-function: ease-in;
animation-delay: ;
/*指定延遲多少秒之後開始執行動畫
*/animation-iteration-count: 3;
/*指定動畫執行的次數
*//*
infinite：無限迴圈
*/animation-direction: reverse;
/*reverse：反向執行
alternate：動畫先正向執行，再反向執行，並且反向執行也會算一次迴圈
alternate-reverse：動畫先反向執行再正向執行
*/animation-play-state: ;
/*設定動畫的執行狀態
*//*
running：執行
paused：暫停 */
animation-fill-mode: ;
/*設定動畫執行完成之後的狀態
*//*
forwards：設定物件狀態為動畫結束時的狀態
*/animation: donghua 5s ease-in 1s 3 reverse forwards running;
/**/
2d轉換
rotate 旋轉
translate 移動
scale 縮放
transform: translate(500px) rotate(720deg);/*在移動的過程中進行旋轉
*/transform: translate(500px) rotate(720deg);
/*在移動的過程中進行旋轉
*/transform: translate(300px, -500px);
transform: translatex(-200px);
transform: scalex(0.5) scaley(0.5);
/*縮小
*/transform: scale(0.5);
/*skew：扭曲
*/transform: skew(45deg, 45deg);
3d轉換
transform: rotate3d(0, 0, 1, 200deg);/*前面三個引數對應x，y，z
第四個引數：旋轉的角度
如果對應位置上面的數字是1，那麼就會沿著該軸進行旋轉
rotate3d(0, 0, 1, 200deg); == rotatez(200deg);
*/transform-origin: left;
/*設定旋轉時軸的位置
*/perspective: ;
/*透視 近大遠小
*//*
取值：500~1000較為合適
*/perspective-origin: ;
/*設定透視點（視線源點）的位置
*/transform: translate3d(200px, 100px, 200px);
/*注意：需要配合perspective屬性使用
*/
transform: scalez(2);/*只針對立體圖形有效果
*/transform-style: preserve-3d;
/*指定該元素下的子元素在該元素的3d環境裡面
*/backface-visibility: ;
/*用來設定當元素背對（旋轉的角度在90deg-270deg之間）我們的時候，元素的可見性
*/
css3的動畫特效
2017 12 20 14 22 49 saucxs 首先複習一下animation動畫新增各種引數 close hover before close hover before animation屬性引數中，延遲引數是我們較為常用的一種引數。當動畫的物件為多個時，我們常常用延遲引數來形成動畫序列。如...
CSS3動畫常見屬性
屬性 描述 keyframes 定義動畫 animation 所有動畫屬性的簡寫屬性，除了animation play state animation name 規定 keyframes動畫的名稱 animation duration 規定動畫完成乙個週期所花費的秒或毫秒，預設是0 animatio...
純css3 載入loading動畫特效
最近專案中要實現當頁面還沒有載入完給使用者提示正在載入的loading，本來是想做個提示的，但是如果放大電腦的解析度就會感覺到很虛，體驗效果很不好。於是就採用css3 js實現這個loading的動畫效果，最終在我們前端工程師的幫助之下完成。所以記錄在這裡，如果感興趣的朋友也可以看看，大家互相焦爐學...