1、複雜動畫 （1）涉及到的屬性： animation-name：動畫名稱； animation-duration：單次動畫總時長； animation-timing-function：時間函數； animation-delay：播放前延時的時長； animation-iteration-count ...
1、複雜動畫
（1）涉及到的屬性：
animation-name：動畫名稱；
animation-duration：單次動畫總時長；
animation-timing-function：時間函數；
animation-delay：播放前延時的時長；
animation-iteration-count：播放次數（具體的數字），當設置infinite時是迴圈播放；
animation-direction：播放順序，其中normal是正常播放，alternate是輪流反向播放，播放次數必須在2次以上。
（2）書寫方式
@keyframes 名字（自己取一個名字）{ ——>定義一個動畫
}
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>複雜動畫練習</title> 9 </head> 10 <style> 11 .box { 12 width: 200px; 13 height: 200px; 14 background-color: blueviolet; 15 border: solid black; 16 position: relative; 17 top: 0; 18 /* 動畫名稱 */ 19 animation-name: demo; 20 /* 動畫時長 */ 21 animation-duration: 5s; 22 /* 動畫運行速度 */ 23 animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); 24 /* 播放前延遲的時長 */ 25 animation-delay: 3s; 26 /* 播放次數，這裡寫的時迴圈播放，可以寫具體數字 */ 27 animation-iteration-count: infinite; 28 /* 播放順序，這裡寫的時輪流反向播放，可以寫normal正常播放 */ 29 animation-direction: alternate; 30 } 31 32 @keyframes demo { 33 from { 34 top: 0; 35 border-radius: 0; 36 } 37 20% { 38 top: 100px; 39 left: 100px; 40 border-radius: 30px; 41 } 42 50% { 43 top: 200px; 44 left: 100px; 45 border-radius: 30px 46 } 47 to { 48 top: 400px; 49 left: 400px; 50 border-radius: 50% 51 } 52 } 53 </style> 54 55 <body> 56 <div class="box"> 57 動畫練習 58 <!-- <img src="img/2010011712541759.jpg" alt=""> --> 59 </div> 60 </body> 61 62 </html>
效果如下：
2、盒子變形
（1） 變形：通過變形可以改變盒子的視覺效果，變形不會改變盒子原本的位置和尺寸，因此不會對其他元素造成影響。
（2） 變形的類型
Translate（移動）
Scale（縮放，1以下是縮小，1以上是擴大）
Skew（傾斜，單位deg）
Rotate（旋轉，預設是沿著Z軸旋轉，單位deg）
（3） 定義原點
Transform-origin：設置盒子的中心點。
（4） 其他屬性
背面可見性：backface-visibility
visible：預設值，背面可見
hidden：背面不可見
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>盒子變形</title> 9 </head> 10 <style> 11 .box { 12 width: 260px; 13 height: 260px; 14 position: relative; 15 } 16 17 .zheng, 18 .fan { 19 width: 260px; 20 height: 260px; 21 font-size: 26px; 22 border: solid black; 23 color: white; 24 text-align: center; 25 line-height: 260px; 26 position: absolute; 27 top: 0; 28 left: 0; 29 transition: all 1s; 30 backface-visibility: hidden; 31 } 32 33 .zheng { 34 background-color: blueviolet; 35 z-index: 2; 36 } 37 38 .fan { 39 background-color: green; 40 transform: rotateY(-180deg) rotateZ(-180deg); 41 } 42 43 .box:hover .zheng { 44 transform: rotateY(180deg) rotateZ(180deg); 45 } 46 47 .box:hover .fan { 48 transform: rotateY(0deg) rotateZ(0deg); 49 } 50 </style> 51 52 <body> 53 <div class="box"> 54 <div class="zheng">正面</div> 55 <div class="fan">反面</div> 56 </div> 57 </body> 58 59 </html>
變形效果如下：
