过渡详解
一、过渡的定义以及基本属性二、过渡名称、过渡时间、过渡延迟三、过渡效果的时间曲线四、实战纯css打造手风琴图片特效一、过渡的定义以及基本属性
定义：CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
二、过渡名称、过渡时间、过渡延迟
transition-property 属性的名称: （当指定CSS 属性改变时，过渡效果将开始）1、all 所有属性都将获得过渡效果( 默认)
2、attr 过渡效果的 CSS 属性名称列表，列表以逗号分隔。
3、none 没有属性会获得过渡效果。transition-duration 过渡时间：完成过渡效果需要的时间 （以秒或毫秒计）transition-delay 延迟时间：等~（以秒或毫秒计）之后再变化
注意：要实现css过渡，必须包含transition-property和transition-duration
案例1：如下一段动图中，我指定了过渡属性名称为宽度，时间为2s，延时1s。所以当鼠标划过div时，div的宽度逐渐改变，而高度不包含在过渡之内。
三、过渡效果的时间曲线
四、实战纯css打造手风琴图片特效
手风琴图片特效原理解释：这个特效主要运用了css3的伪类以及css3的过渡效果。
首先写出body的框架，将图片放入li里面以便后续伪类操作。调整wrap、ul、li的宽度高度以及位置。需要注意：wrap宽度满足要求：展示的li总宽度度以及鼠标划上后图片的宽度+剩下四个li的宽、ul宽度度大于5张图片的总宽度、li的宽度必须小于图片的宽度且li还需设置浮动并列在一排。使用伪类，当鼠标划到ul时候，li的宽度变小。鼠标划到li的时候，被划到的li宽度变为图片的宽度。且需要注意是否满足第2点钟的
wrap宽度满足鼠标划上后图片的宽度+剩下四个li的宽度使用css3过渡进行美化并且将wrap的超出隐藏，即可完成。
代码下载地址如果觉得我写的对你有帮助的话，请一键三连。这将会是我日后更新的动力。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>手风琴图片特效</title></head><style>* {margin: 0;padding: 0;}html,body {margin: 0;padding: 0;width: 100%;background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);}#wrap {position: relative;margin: 100px auto;/*宽度满足要求：1、展示的li总长度2、鼠标划上后图片的长度+剩下四个li的长度*/width: 1005px;height: 450px;box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.4);overflow: hidden;}#wrap ul {position: relative;/*长度大于5张图片的总长度*/width: 4000px;list-style-type: none;}#wrap ul li {position: relative;float: left;width: 200px;height: 450px;border-left: 1px solid white;box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.4);transition: all 0.5s cubic-bezier(.93, .13, 1, .17);}#wrap ul li a img {display: block;}#wrap ul li .title {position: absolute;top: 400px;left: 0px;width: 800px;height: 50px;background: rgba(0, 0, 0, 0.5);line-height: 50px;}#wrap ul li .title a {padding-left: 10px;color: white;font-size: 20px;font-weight: 500;text-decoration: none;}#wrap ul:hover li {width: 50px;}#wrap ul li:hover {width: 800px;}</style><body><div id="wrap"><ul><li><div class="title"><a href="#" target="_self">手风琴特效展示</a></div><a href=""><img src="./img/1.jpg" alt="卡通图片" width=800 heiht=450></a></li><li><div class="title"><a href="#" target="_self">手风琴特效展示</a></div><a href=""><img src="./img/2.jpg" alt="卡通图片" width=800 heiht=450></a></li><li><div class="title"><a href="#" target="_self">手风琴特效展示</a></div><a href=""><img src="./img/3.png" alt="卡通图片" width=800 heiht=450></a></li><li><div class="title"><a href="#" target="_self">手风琴特效展示</a></div><a href=""><img src="./img/4.png" alt="卡通图片" width=800 heiht=450></a></li><li><div class="title"><a href="#" target="_self">手风琴特效展示</a></div><a href=""><img src="./img/5.png" alt="卡通图片" width=800 heiht=450></a></li></ul></div></body></html>
