CSS3动画

CSS3动画


## 动画与过渡的区别
transition与animation
1.transition:; 过渡 需要事件触发
2. animation 动画 不需要事件触发,使用关键帧就可以执行

 

## animation
1:定义动画

方式一:from{}起始位置
to{}终点位置
或者
方式二:0%{}起始位置
25%{}过程1
..过程n
100%{}终点位置
 


## 调用动画

animation-name:;关键帧名字 动画名
animation-duration:;关键帧时长 总运动时间
animation-delay: ;关键帧延迟时间
animation-iteration-count:;运动执行次数  (数字 数字为几,执行多少次,默认情况一次 ) infinite为无限循环

animation-direction:;运动方向  (reverse 为反向运动)
alternate    单数次,顺时针 偶数次,逆时针
alternate-reverse    单数次,逆时针 偶数次,顺时针
animation-timing-function:;运动使用的类型(加速 减速 贝塞尔曲线运动...)
animation-play-state:;
paused    暂停
running 运动

 



## animation的综合写法
综合写法:
animation:名字 运动时间 速度 延迟时间 次数;

 

### 这是css3动画的例子

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title></title>
 6 <style type="text/css">
 7 *{
 8 margin: 0;
 9 padding: 0;
10 }
11 .box{
12 width: 500px;
13 height: 500px;
14 background: skyblue;
15 
16 }
17 .box1{
18 width: 100px;
19 height: 100px;
20 background: skyblue;
21 /*transition: 1s;*//*过渡 需要事件触发*/
22 /*使用animation调用关键帧*/
23 /*animation:mz 3s;综合写法*/
24 animation-name: mz2;/*关键帧名字 动画名*/
25 animation-duration: 2s;/*关键帧时长 总运动时间*/
26 animation-delay: 3s;/*关键帧延迟时间*/
27 animation-iteration-count: 2;/*运动执行次数 默认情况一次 infinite无限循环*/
28 animation-direction: reverse;/*运动方向*/
29 animation-direction: alternate;/*先正向再反向*/
30 animation-direction: alternate-reverse;
31 animation-timing-function: ease;/*运动使用的类型*/
32 animation: mz2 2s 1s linear infinite;
33 
34 }
35 .box:hover .box1{
36 animation-play-state: running;/*鼠标移入暂停*/
37 }
38 /*定义动画*/
39 @keyframes mz{
40 from{margin-left: 0;}
41 to{
42 margin-left: 500px;
43 }
44 }
45 @keyframes mz2{
46 0%{/*初始状态*/
47 margin-left: 0px;
48 margin-bottom: 0px;
49 }
50 25%{
51 margin-left: 500px;
52 margin-top: 0px;
53 }
54 50%{
55 margin-left: 500px;
56 margin-top: 400px;
57 }
58 75%{
59 margin-left: 0px;
60 margin-top: 400px;
61 }
62 100%{
63 margin-left: 0px;
64 margin-top: 0px;
65 }
66 }
67 </style>
68 </head>
69 <body>
70 <div class="box">
71 <div class="box1"></div>
72 </div>
73 </body>
74 </html>

 


————————————————
版权声明:本文为CSDN博主「weixin_45919671」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_45919671/article/details/105007851

posted @ 2020-03-31 18:01  爱睡觉的小朋友  阅读(174)  评论(0编辑  收藏  举报