一、过渡
元素从一个状态瞬间到达另一个状态称之为“干蹦效果”，元素从一个状态经过一段时间到达另一个状态称之为“动画效果”。
过渡： transition
transition-property： 过渡属性 all所有属性 必需属性 （property 属性）transition-duration: 过渡时间transition-timing-function： 过渡的速度曲线 支持贝塞尔曲线 linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。transition-delay: 过渡的延迟时间注意： 过渡并不是能应用到所有的属性上，有些属性不支持过渡，一般属性值为数值类型的都支持过渡。
执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } figure { width: 200px; height: 200px; border: 1px solid red; margin: 100px auto; position: relative; overflow: hidden; } img { width: 200px; height: 200px; /* position: absolute; */ } figcaption { width: 200px; height: 50px; /* 蒙版效果 */ background-color: rgba(0, 0, 0, .5); position: absolute; bottom: -50px; line-height: 50px; color: white; text-align: center; transition: all 1s ease 1s; } figure:hover figcaption{ bottom: 0; } </style> </head> <body> <figure> <img src="./imgs/1.jpg" alt=""> <figcaption>斑动梦想，码上起航</figcaption> </figure> </body> </html>结果：
二、动画
调用动画：animation
animation: name 10s ease 0s infinite alternate forwards;
animation-name: 动画的名字animation-duration：动画的时间animation-timing-function： 动画的速度曲线animation-delay： 动画延迟时间animation-iteration-count: 动画的执行此处 infinite 无限循环 n为具体的次数animation-direction: 动画的方向 alternate 反向执行动画animation-fill-mode： forwards 可以保留动画最后一帧的状态animation-play-state: 动画状态
running：运行paused：暂停执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { width: 100px; height: 100px; background-color: orange; border-radius: 50%; position: absolute; left: 0; top: 0; /* 调用动画 */ /* animation: move 2s; */ /* 动画名称 */ animation-name: move; /* 动画时间 */ animation-duration: 2s; /* 保留动画最后的状态 */ animation-fill-mode: forwards; /* 动画的速度 */ animation-timing-function: ease-in-out; /* 动画的延迟时间 */ animation-delay: 1s; /* 动画的次数 */ animation-iteration-count: infinite; /* 动画的方向: alternate 代表可以从终点运动到起点； 默认动画执行的时候都是从起始点到终点 */ animation-direction: alternate; /* 动画的连写 */ animation: move 1s ease 3s 3 alternate forwards; } /* 定义动画 */ @keyframes move { from { left: 0; top: 0; } to { left: 700px; top: 0; } } </style> </head> <body> <div class="box"></div> </body> </html>结果：
在这里插入图片描述
动画的注意事项：
百分比设置的是时间
动画和过渡的区别：
触发条件不同: 动画可以自动执行，不需要触发条件，过渡必须需要触发条件状态的数量不同： 过渡只能设置两个状态，动画可以设置多个状态三、css3动画实现轮播图
执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .carousel { width: 560px; height: 300px; border: 1px solid red; /* 父相子绝 */ position: relative; margin: 0 auto; overflow: hidden; } li { list-style: none; float: left; } ul { /* 足够宽 */ width: 4000px; height: 300px; /* border: 1px solid #000; */ /* 定位 */ position: absolute; left: 0; top: 0; animation: move 20s infinite; } @keyframes move { from { left: 0; } 5% { left: 0; } 20% { left: -560px; } 25% { left: -560px; } 40% { left: -1120px; } 45% { left: -1120px; } 60% { left: -1680px; } 65% { left: -1680px; } 80% { left: -2240px; } 85% { left: -2240px; } to { left: -2800px; } } </style> </head> <body> <div class="carousel"> <ul> <li><img src="images/0.jpg" alt=""></li> <li><img src="images/1.jpg" alt=""></li> <li><img src="images/2.jpg" alt=""></li> <li><img src="images/3.jpg" alt=""></li> <li><img src="images/4.jpg" alt=""></li> <!-- 将第一张图片放到最后：猫腻图 --> <li><img src="images/0.jpg" alt=""></li> </ul> </div> </body> </html>结果：
注意： 0% 等价于 from ， 100% 等价于to
四、立方体
父元素一定要设置保留子元素的3D效果：trnasform-style：preserve-3d；
执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { width: 400px; height: 400px; transition: all 1s; } .box { /* 父元素设置相对定位 */ position: relative; margin: 150px auto; /* background-color: rgba(0, 0, 0, .5); */ /* 想让子元素展示位3D效果，必须给父元素设置以下属性，让子元素保留3D效果 */ transform-style: preserve-3d; /* 为了看到整个的移动过程，将其旋转 */ transform: rotateX(30deg) rotateY(30deg); } .box > div { /* 子元素设置绝对定位 */ position: absolute; left: 0; top: 0; } .forward { background-color: rgba(0, 255, 0, .5); transform: translateZ(200px); } .back { background-color: rgba(0, 0, 255, .5); transform: translateZ(-200px); } .left { background-color: rgba(0, 255, 255, .5); transform: rotateY(90deg) translateZ(200px); } .right { background-color: rgba(125, 125, 255, .5); transform: rotateY(90deg) translateZ(-200px); } .top { background-color: rgba(255, 125, 125, .5); transform: rotateX(90deg) translateZ(-200px); } .bottom { background-color: rgba(255, 0, 0, .5); transform: rotateX(90deg) translateZ(200px); } </style> </head> <body> <div class="box"> <div class="forward"></div> <div class="back"></div> <div class="right"></div> <div class="left"></div> <div class="top"></div> <div class="bottom"></div> </div> </body> </html>结果： 斑码教育——口碑最好最专业的前端培训
