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
