> ## :-: [過度](http://css.doyoe.com/properties/transition/index.htm) ```css /* transition 過度動畫 作用屬性 -- transition-property 時間間隔 -- transition-duration 動圖效果 -- transition-timing-function 等待延時 -- transition-delay */ transition: all .5s linear .3s; /* cubic-bezier 貝塞爾曲線函數 */ transition: all .5s cubic-bezier(0.6, -0.25, 0.75, 0.05) .3s; ``` > ## :-: [關鍵幀 - 動圖](http://css.doyoe.com/properties/animation/index.htm) ```css .demo { position: absolute; width: 50px; height: 50px; background-color: red; /* animation 播放關鍵幀動畫 */ animation: demo 5s; /* animation 播放關鍵幀動畫 并行執行demo2 */ animation: demo 5s, demo2 5s; /* animation 播放關鍵幀動畫 (復合值) none ----- 動圖名稱 duration ----- 耗時 timing-function ----- 效果(貝塞爾曲線) delay ----- 等待延遲(執行第一次的時候才會等待，并不是每一次都等待) iteration-count ----- 循環執行的次數(infinite無限次) direction ----- 可以改變走關鍵幀的方式(倒序) fill-mode ----- 設置保留最后一幀的狀態、 */ animation: demo 5s cubic-bezier(1, -0.32, 0.52, 0.96) 2s infinite alternate forwards; } /* @keyframes demo 關鍵幀容器(demo名字隨便取) */ @keyframes demo { 0% { top: 0; left: 0; } 30% { top: 400px; left: 200px; background-color: blue; } 60% { top: 0; left: 800px; background-color: #ccc; } 100% { top: 0; left: 0; background-color: red; } } ``` Demo - 打字效果：`http://a-1.vip/demo/demo_c3/font.html` Demo - 跑馬效果：`http://a-1.vip/demo/demo_c3/horse.html` > ## :-: [旋轉、縮放、移動或傾斜](http://css.doyoe.com/properties/transform/index.htm) ```css /* transform 對元素進行旋轉、縮放、移動或傾斜(復合值) 定義和用法：屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。 origin -- 設置或檢索對象以某個原點進行轉換 style -- 指定某元素的子元素是（看起來）位于三維空間內，還是在該元素所在的平面內被扁平化。 */ transform: rotate(45deg) scale(1.3, 1.3); /* 屬性值：scale 縮放(復合值) 1.伸縮的是此元素變化坐標軸的刻度 2.可以疊加操作 scaleX -- 縮放x軸 scaleY -- 縮放y軸 scaleZ -- z scale3d */ /* scale(x,y,z) */ transform: scale(.5); /* rotate 旋轉(復合值) rotate rotateX rotateY rotateZ rotate3d */ transform: rotate(-45deg); /* 改變旋轉中心點，默認值：center 取值：0 5px 5% center */ transform-origin: 0 0; /* rotate3d(x,y,z,angle) 設置一個自定義的軸進行旋轉 */ transform: rotate3d(1, 1, 0, 45deg); /* skew 傾斜(復合值) skew(x, y) skewX -- x skewY -- y */ transform: skew(45deg, 0deg); /* 父級加 transform-style: preserve-3d; 子級將支持3d渲染 -- 指定某元素的子元素是（看起來）位于三維空間內，還是在該元素所在的平面內被扁平化。 -- 當該屬性值為「preserve-3d」時，元素將會創建局部堆疊上下文。 -- 決定一個變換元素看起來是處在三維空間還是平面內，需要該元素的父元素上定義 <' transform-style '> 屬性。 -- 對應的腳本特性為transformStyle。 */ transform-style: preserve-3d; /* opacity: 1; */ /* transform: translateZ(0); */ /* gpu加速 標準方法 */ will-change: transform; ``` Demo - 3D旋轉圖片墻：`http://a-1.vip/demo/demo_c3/3d.html`