过渡

一般与鼠标悬停 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;  /* 改背景色 */
            padding: 50px;   /* 改内边距 */
            margin: 50px;    /* 改外边距 */
        }
</style>
    <div class="box1">123321</div>

效果：在这里插入图片描述

动画

定义一个动画

@keyframs xxx动画名 {
	0%{	 开始状态，也可以写from
		样式
	}
	/*	中间可以写1%-99%，丰富动画中途的演变过程	*/
	100%{	 结束样式，也可也写to
		样式
	}
}

使用动画

某选择器{
	animation-name: xxx动画名;
	animation-duration: xxs 	// 持续时间
}

↑走完动画之后默认恢复到原位置

动画的属性

属性	描述
animation-name	规定动画的名称（必填）
animation-duration	规定动画完成一个周期的持续时间，单位可以是秒s，或毫秒ms（必填）
animation-timing-function	规定动画的速度曲线（默认是ease主键减速）
animation-delay	规定动画何时开始（默认0）
animation-iteration-count	规定动画的播放次数（不写默认是1），填数字则重复指定次数，填infinite则无限循环
animation-direction	规定动画是否逆向播放（不写默认是normal，从头到尾结束后再回到开头）。填alternate则动画正向播放结束后会逆向播放回到起点（但必须配合上面的无限循环infinite使用才会有效果）
animation-fill-mode	规定动画结束后的状态，填forwards保持在结束位置，填backwards则动画结束后回到起始位置（但必须配合上面的animation-iteration-count，指定有限的循环次数使用才会有效果）
animation-play-state	规定动画是否正在运行或暂停，默认是running，填paused则暂停播放，一般配合鼠标悬停hover使用

用法：

 <style>
    @keyframes move {
        from{
                width: 200px;
                height: 200px;
                background-color: skyblue;
                padding: 0;
                box-sizing: border-box;
        }
        to{
                width: 400px; 
                height: 160px; 
                background-color: pink;  
                box-sizing: border-box;
                padding: 50px;   
                margin: 50px;    
        }
    }
        div {
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
            /*运动曲线 默认ease */
            animation-timing-function: ease-in-out;
            /* 何时开始 */
            animation-delay: 0.5s;
            /* 重复 可以指定数字 次数，默认1次; infinite 则无限循环播放 */
            animation-iteration-count: infinite;
      /* 是否反方向播放 默认的是 normal ; alternate 则正向播放结束后反方向播放*/   
            animation-direction: alternate;			 /* 无限循环才有效 */
      /* 动画结束后的状态 默认的是 backwards 回到起始状态 ;	forwards 则停留在结束状态 */
           /* animation-fill-mode: forwards; */    /* 有限循环才有效 */
        }
        div:hover {
            /* 鼠标悬停div时停止动画，鼠标离开后继续动画 */ 
            animation-play-state: paused;
        }
    </style>
    <div>123321</div>

效果：请添加图片描述

以上这些完全可以用简写简化代码

动画简写

格式： animation: name duration timing-function delay iteration-count direction fill-mode; animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向动画结束状态;

前两个是必填，后面其他的都有默认值

所以上面例子可以简写为 div{ animation: move 2s ease-in-out 1s infinite alternate ; }

效果是一样的

其中的第三项属性animation-timing-function 运动曲线也有细分

值	描述
linear	匀速播放
ease	默认值。低速开始，然后加快，结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps( count )	指定时间函数中的间隔数量（步长）

steps的用法：

<style>
        div{
            width: 0;
            height: 30px;
            overflow: hidden;  
            font-size: 20px;
            animation: dazi 2s steps(10) forwards;	/* 步数和字数一样*/
            color: black;
        }
        @keyframes dazi{
            0% { }
            100% {
                width: 200px;	/* 结束时的宽度= 字数 * 每个字大小font-size */
            }
        }
</style>
    <div>可以实现打字机的效果</div>

效果：

请添加图片描述

CSS3之过渡与动画

过渡

动画

定义一个动画

使用动画

动画的属性

动画简写