（1）涉及到的屬性：
animation-name：動畫名稱；
animation-duration：單次動畫總時長；
animation-timing-function：時間函式；
（2）書寫方式
@keyframes 名字（自己取乙個名字）
>複雜動畫練習
title
>
9head
>
10<
style
>
11.box
3132
@keyframes demo
3720%
4250%
47to 52}
53style
>
5455
<
body
>
56<
div
class
="box"
>
57動畫練習
5859
div>
60body
>
6162
html
>
效果如下：
（1） 變形：通過變形可以改變盒子的視覺效果，變形不會改變盒子原本的位置和尺寸，因此不會對其他元素造成影響。
（2） 變形的型別
translate（移動）
scale（縮放，1以下是縮小，1以上是擴大）
skew（傾斜，單位deg）
rotate（旋轉，預設是沿著z軸旋轉，單位deg）
（3） 定義原點
transform-origin：設定盒子的中心點。
（4） 其他屬性
背面可見性：backface-visibility
visible：預設值，背面可見
hidden：背面不可見
>盒子變形
title
>
9head
>
10<
style
>
11.box
1617
.zheng,
18.fan
3233
.zheng
3738
.fan
4243
.box:hover .zheng
4647
.box:hover .fan
50style
>
5152
<
body
>
53<
div
class
="box"
>
54<
div
class
="zheng"
>正面
div>
55<
div
class
="fan"
>反面
div>
56div
>
57body
>
5859
html
>
變形效果如下：
過渡 變形 動畫
transition all 0.3s linear 0 要過渡的屬性 過渡執行的時間 運動速度 何時開始 注意 組合寫法 旋轉之後，座標會跟著旋轉 移動 transform translate 50 40 x軸位移 50 y軸位移 40 transform translatex 30px x軸移動...
動畫與變形
1 動畫 通過 keyframes來設定動畫序列，序列中每個關鍵幀描述動畫元素在動畫序列的特定時間內如何渲染。keyframes 動畫名稱 to keyframes 動畫名稱 100 2 animation所有動畫屬性的簡寫 animation duration 動畫完成乙個迴圈所需時間長度 單位 ...
css 動畫（一）transform 變形
前言 這是筆者學習之後自己的理解與整理。如果有錯誤或者疑問的地方，請大家指正，我會持續更新！translate 位置平移 rotate 旋轉 scale 縮放 設定轉換元素的基準點，然後元素的變形就圍繞這個點展開 設定元素及其子元素怎樣在三維空間中展示 設定元素距離檢視的距離，設定視點 設定當元素不...