css動畫

時間 2019-11-11

標籤 css 動畫欄目 CSS 简体版

原文原文鏈接

動畫須要先定義，再調用。

1. 定義動畫

1）連續動畫的定義

1     @keyframes 動畫名字 {
2         from {
3             //動畫開始以前的狀態
4         }
5         to {
6             //動畫結局的狀態
7         }
8     }

2）分步多狀態動畫的定義

 1     @keyframes 動畫名字 {  
 2         0% {
 3             //開始狀態
 4         }
 5         50%{
 6             //中間狀態
 7         }
 8         100% {
 9             //結束狀態
10         }
11     }

2. 調用動畫

語法： animation: 動畫名稱動畫時長其餘屬性值;動畫

誰用動畫就給誰加調用。spa

動畫名稱及動畫時長必須有，其餘屬性值隨意且順序也隨意。3d

將上表作一個分析解釋：code

動畫的名字 animation-name: dh;
動畫的時間 animation-duration: 5s;
動畫速度曲線（勻速或其餘） animation-timing-function: linear; 勻速，默認ease表示緩衝；steps(5) 按步分5次走
動畫延遲多久後執行 animation-delat: 3s; 默認爲0s
動畫播放次數 animation-iteration-count: 2; 無限次爲infinite
動畫是否逆向播放 animation-direction: alternate; 默認normal
動畫暫停 animation-play-state: paused; 默認running運動
動畫結束後的狀態 animation-fill-mode: forwards; 保持當前狀態，backwords回到起始狀態

3. 3D輪播圖案例

 1 <!-- 3D自動輪播圖，鼠標放上的時候暫停輪播 -->
 2 
 3 <style>
 4     body {
 5         /* 設置透視 */
 6         perspective: 600px;
 7     }
 8     /* 用父盒子包裹3D立方體 */
 9     .box {
10         width: 700px;
11         height: 300px;
12         margin: 100px auto;
13         position: relative;
14         transform-origin: center;
15         transform-style: preserve-3d;
16         /* 動畫名爲dh，總時長5s，無限次勻速播放 */
17         animation: dh 5s infinite linear;
18     }
19     .box img {
20         width: 700px;
21     }
22     .lb {
23         position: absolute;
24     }
25     .lb:nth-child(1) {
26         /* 沿Z方向的位移設置成輪播圖圖片width的一半 */
27         transform: rotateY(90deg) translateZ(350px);
28     }
29     .lb:nth-child(2) {
30         transform: rotateY(-90deg) translateZ(350px);
31     }
32     .lb:nth-child(3) {
33         transform: rotateY(0deg) translateZ(350px);
34     }
35     .lb:nth-child(4) {
36         transform: rotateY(180deg) translateZ(350px);
37     }
38     @keyframes dh {
39         from {
40             transform: translateZ(-400px) rotateY(0deg);
41         }
42         to {
43             transform: translateZ(-400px) rotateY(360deg);
44         }
45     }
46     .box:hover {
47         /* 鼠標通過時暫停動畫 */
48         animation-play-state: paused;
49     }
50 </style>
51 <body>
52     <div class="box">
53         <div class="lb">
54             <img src="images/lb1.png" alt="">
55         </div>
56         <div class="lb">
57             <img src="images/lb2.png" alt=""
58         </div>
59         <div class="lb">
60             <img src="images/lb3.png" alt="">
61         </div>
62         <div class="lb">
63             <img src="images/lb4.png" alt="">
64         </div>
65     </div>
66 </body>

效果：orm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。