CSS3之过渡与动画

前言：可以配合我的另一篇博客（CSS3之2D转换、3D转换）一起看
CSS3之2D转换、3D转换

过渡

一般与 鼠标悬停 hover 配合使用

哪个盒子要过度给哪个盒子加transition

transition 拥有标签

• 过渡的属性 （ 如宽（width）、高（height）、内外边距（padding、margin）、背景色（background-color）都可以，all则为以上全部属性）

• 花费时间 （单位是 秒（必须写单位） 如0.5s）

• 运动曲线 （linear 匀速、ease逐渐慢下来（默认值 可省略）、ease-in加速、ease-out减速、ease-in-out先加速后减速）

• 何时开始 （单位是 秒（必须写单位），相当于延迟触发时间 默认0s（可以省略））

例：

<style>
 		.box1 {
     
            width: 200px;
            height: 200px;
            background-color: skyblue;
            padding: 0;
            box-sizing: border-box;
            transition: width .6s ease-in, 
            			height .5s ease-out,
                		background-color .3s ease-in-out,
                		padding .4s ease 1s,
                		margin .5s linear .6s;
            /*想统一过渡效果的话可以简写为 transition: all .5s ease-in .3s; */
        }
        .box1:hover {
     
            width: 400px; /* 改宽度 */
            height: 160px; /* 改高度 */
            background-color: pink