> ## :-: [過度](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`
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request