css动画

Posted 2022-12-28 cnlisiyiii-stu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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: 动画名称动画时长其他属性值;

谁用动画就给谁加调用。

动画名称及动画时长必须有，其他属性值随意且顺序也随意。

将上表做一个分析解释：

动画的名字 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>

效果：

技术图片

以上是关于css动画的主要内容，如果未能解决你的问题，请参考以下文章