C++結構體Struct的cmp函式
一. 過渡
過渡由四個部分構成，分別是：過渡屬性的名稱，過渡需要的時間，過渡的方式和過渡的延遲時間。
1. 過渡屬性的名稱
-
transition-property過渡樣式
-
當過渡多個樣式的時候可以寫 all
2. 過渡時間
-
transition-duration如果讓過渡的感覺柔和一下，那就是需要過渡的時間不是一瞬間的而是慢慢的。 -
過渡的時間直接是以秒 s 或者 ms 為單位，預設 0s
3. 過渡的方式
-
transition-timing-function過渡方式,過渡方式的不同而在運動中改變速度 -
貝塞爾曲線函式是非常複雜
http://www.css3beziercurve.net/函式是非常複雜的，但是在 -
css 中為我們封裝了 5 種
-
預設值，先慢再快最後慢
transition-timing-function:ease; -
先慢，後越來越快
transition-timing-function:ease-in; -
速度在開始和結束時都很慢,中間不加速
transition-timing-function:ease-in-out; -
先快，後越來越慢
transition-timing-function:ease-out; -
勻速
transition-timing-function:linear;
-
4. 過渡的延遲時間
-
過渡的延遲時間
transition-delay在過渡效果開始作用之前需要等待的時間，值以秒（s）或毫秒（ms）為單位。 -
取值為正時會延遲一段時間來響應過渡效果；取值為負時會導致過渡立即開始。
5. 簡化寫法
-
順序是
transition：過渡時間 延遲時間 過渡方式 過渡樣式 -
注意“執行時間和延遲時間的順序”不能改變
-
最簡寫法：
transition：過渡時間；
CSS3 過渡動畫模板、CSS3 Transition 動畫模板 http://web.chacuo.net/css3transition
6. 多重樣式過渡
使用 transition 進行多個樣式並且不同時過渡樣式時，每一個不同時間的過渡樣式需要用逗號分隔。
二. 變化
變換分為兩種：2D（重點）和 3D，需要知道三個軸 xyz。
1. transform屬性
四個最常用的變化函式，分別是：
-
translate 位移
-
scale 縮放
-
rotate 旋轉
-
skew 扭曲
/*一個變化函式*/
transform:變化函式()
/*多個變化函式*/
transform:變化函式1()變化函式2()……
2. translate()位移函式
translate()在 2d 變換中位移可以有 X 軸和 Y 軸的位移方向，引數可以使用長度單位，百分比對應的是自己的寬度和高度，正直或者負值均可。
-
transform: translateX(x);沿 X 軸方向平移 正值左移 負值右移 -
transform: translateY(y);沿 Y 軸方向平移 正值下移 負值上移 -
transform: translate(x, y);沿 X 軸和 Y 軸同時平移 -
注意：位移和固定定為不同，它並沒有脫離文件流，也不會影響其他元素的佈局
-
元素居中，之前 margin 負值是需要知道元素的寬度和高度，使用 translate 百分比值則不需要
3. rotate()函式
-
rotate()函式在 2d 變換中旋轉只能以 Z 軸進行旋轉，所以 rotate()函式預設為 Z 軸旋轉函式。
-
引數為旋轉角度，deg 單位為旋轉角度。角度可以為正值或負值。
-
旋轉中心點，是元素最中心的點
4. scale()函式
-
scale()縮放函式中的引數是以倍數為基礎的，1 代表當前大小
-
1 以上的“正數”為當前大小的倍數。
-
1 以下 0 以上的“正數”為縮小的倍數。
-
0 倍為消失
-
當引數值為負值的時候，元素進行鏡面翻轉，同樣倍數會起作用
5. skew()函式
-
skew()在 2d 變換中傾斜可以有 X 軸和 Y 軸的傾斜角度
-
填寫旋轉角度，deg 單位為旋轉角度，角度可以為正值或負值。
-
skew()預設為 X 軸傾斜函式
6. 變換函式的執行過程
當變換屬性需要疊加使用時，不可以生明多個 transform 屬性，而是需要把所有要使用的變換函式新增在一個 transform 屬性中，用空格分隔。但存在前後順序問題。
7. 基點
transform-origin 屬性是可以改變元素變化時的原點，預設情況下，元素的中心原點位於 x 軸和 y 軸的 50%處。
-
在變化中，任何元素都有⼀箇中⼼原點。預設情況下，元素的中⼼原點位於 x 軸和 y 軸的 50%處。
-
transform-origin 屬性取值有兩種：⼀種是“⻓度值”；另外⼀種是“關鍵字”。
-
當取值為⻓度值時，單位可以為 px、em 和百分⽐等。
-
8. 3D變換效果
（1）透視
在 css 變換中如果想作出 3d 效果，一定要關注透視距離 perspective 屬性。
perspective 屬性值越大，元素的變形就越小。
perspective 屬性值越小，元素的變形就越大。
-
perspective 屬性定義透視距離，距離為長度單位
-
模擬人眼睛到 3D 變化元素之間的距離
-
【重點】透視距離只能定義在 3D 變化的父元素上
（2）旋轉X軸和Y軸
-
transform:rotateX(deg);x 軸旋轉 -
transform:rotateY(deg);y 軸旋轉
三. 動畫
1. 關鍵幀
@keyframes 是 css 中的@規則，通過在動畫序列中定義關鍵幀的樣式，來控制 CSS 動畫序列中的步驟。
@keyframes move {
/*樣式列表*/
0% {
transform: translate(0);
}
100% {
transform: translate(600px);
}
}
2. 動畫名稱
animation-name屬性就是指定動畫要使用哪一個關鍵幀。
div{
width:100px;
height:100px;
background-color:red;
/*這個元素使用關鍵幀*/
animation-name:move;
}
@keyframesmove{
0%{
transform:translate(0);
}
100%{
transform:translate(600px);
}
}
3. 動畫持續時間
animation-duration屬性代表一個動畫週期的時長，單位為秒(s)或者毫秒(ms)，預設值 0 秒。
div{
/*這個元素使用關鍵幀*/
animation-name:move;
/*動畫時長*/
animation-duration:1s;
}
@keyframesmove{
0%{
transform:translate(0);
}
100%{
transform:translate(600px);
}
}
4. 動畫的運動方式
animation-timing-function屬性跟transition-timing-function屬性就是過渡的運動方式類似。同樣也具有封裝好的方式和貝塞爾曲線的方式。
-
ease;預設
-
ease-in;
-
ease-out;
-
ease-in-out;
-
linear;
-
steps(數值, 定位) 定位：start/end 預設 end 指逐步運動
5. 動畫的延遲時間
animation-delay屬性動畫的延遲時間和之前過渡的延遲時間一樣使用
div{
/*這個元素使用關鍵幀*/
animation-name:move;
/*動畫時長*/
animation-duration:1s;
/*運動方式*/
animation-timing-function:linear;
/*動畫延遲時間*/
animation-delay:2s;
}
6. 結束狀態
在動畫執行到某個位置的時候，動畫停止，元素預設會迅速回到起始位置
-
animation-fill-mode:設定動畫結束時盒子的狀態 -
屬性值：
forwards保持動畫結束後的狀態 -
屬性值：
backwards動畫結束後回到最初的狀態
7. 動畫的執行順序
animation-direction 屬性是動畫的執行順序
-
屬性值：normal 正向，預設值
-
屬性值：reverse 反向
8. 動畫迴圈次數
-
animation-iteration-count屬性主要用來定義動畫的播放次數。 -
其值通常為整數，但也可以使用帶有小數的數字，其預設值為 1，這意味著動畫將從開始到結束只播放一次。
-
如果取值為
infinite，動畫將會無限次的播放。
9. 簡寫方式
-
animation: 動畫執行時間 延遲時間 執行關鍵幀名稱 運動方式 運動次數 結束狀態; -
最簡方式 animation: 動畫執行時間 執行關鍵幀名稱;
-
執行時間和延遲時間順序不可調整
-
animation: 2s 3s move linear 1 forwards reverse;
10. 停止動畫
-
animation-play-state 屬性規定動畫是否正在執行或暫停。
-
屬性值：running 運動的，預設值
-
屬性值：paused 暫停的
-