css3过渡属性：
简写方法：transition: 属性值1 属性值2 属性值3 属性值4;属性值1： all(默认值) 需要参与过渡的属性（如：width,height......）属性值2： 过渡的时间 （单位：s 秒 ms 毫秒）属性值3： 延迟的时间 （单位：s 秒 ms 毫秒）属性值4： 动画的类型示例：transition: all 1s 0.2s linear;不同属性值的不同变化，可用逗号隔开：transition: width 1s, height 2s, background 3s;
注：**transition** 必须通过鼠标事件触发（例如：鼠标滑过 :hover）
动画效果的实现
初始状态:
鼠标移上去：
鼠标移上去（黑色区域上面）之后，红色区域逐渐变小的同时其它色块分别从左侧和底部缓缓上来（会有一个过渡的过程）。
鼠标移出：
鼠标移出（黑色区域）后，红色区域逐渐变大的同时，其它色块分别向左侧和底部缓缓退出，直到恢复初始状态。
HTML代码：
<div class="big_box"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div><div class="box6"></div></div>
css样式：
.big_box{width: 600px;height: 500px;margin: 100px auto;background: black;/* 添加定位，形成包含块（参照物） */position: relative; /*隐藏大盒子外面的内容 */overflow: hidden;}.box1{width: 500px;height: 400px;background: red;position: absolute;top: 50px;left: 50px;/* 过渡效果 */transition: all 1s;}/* 鼠标移上去，改变大小 */.big_box:hover .box1{width: 340px;height: 280px;}.box2,.box3,.box4,.box5,.box6{width: 160px;height: 125px;}.box2{background: green;/* 添加定位，初始状态下在大盒子外面 */position: absolute;top: 50px;left: 100%;/* 过渡效果 */transition: 0.5s 0.2s;}/* 鼠标移上去改变位置（跑到大盒子里面） */.big_box:hover .box2{left: 415px;}.box3{background: yellow;position: absolute;top: 202px;left: 100%;transition: 0.5s 0.3s;}.big_box:hover .box3{left: 415px;}.box4{background: palevioletred;position: absolute;top: 100%;left: 416px;transition: 0.5s 0.2s;}.big_box:hover .box4{top: 352px;}.box5{background: orange;position: absolute;top: 100%;left: 233px;transition: 0.5s 0.28s;}.big_box:hover .box5{top: 352px;}.box6{background:plum;position: absolute;top: 100%;left: 50px;transition: 0.5s 0.36s;}.big_box:hover .box6{top: 352px;}
学习的时候查资料发现很多技术方面的东西都是博客上的文章，前两天注册了一个博客账号，今天尝试着写了一篇，还是第一次写，希望对看到这篇文章的人有帮助，也希望技术大牛们多多指教！！！
