过渡及动画样式（使用方法）

transition———过渡

transition: css过渡样式 过渡时间 运动曲线 开始时间。

• 过渡样式: all
• 过渡时间:s/ms
• 运动曲线:ease
• 开始时间:s|ms

transition: all 5s linear 2s;

transition-property 指定CSS属性的name，transition效果

transition-duration transition效果需要指定多少秒或毫秒才能完成

transition-timing-function 指定transition效果的转速曲线

linear 匀速。

ease 规定慢速开始，然后变快，然后慢速结束的过渡效果。

ease-in 规定以慢速开始的过渡效果。

ease-out 规定以慢速结束的过渡效果。

ease-in-out 规定以慢速开始和结束的过渡效果。

animation——动画

animation结合@keyframes使用

animation: 选择器的关键名称 动画时间 运动曲线 开始的时间 播放次数

是否反复播放 是否运用最后一帧动画的样式 是否暂停或播放;

animation: move 3s linear 0s 1 normal forwards;

• animation-name 指定要绑定到选择器的关键帧的名称
• animation-duration 动画指定需要多少秒或毫秒完成
• animation-timing-function 设置动画将如何完成一个周期
• animation-delay 设置动画在启动前的延迟间隔。
• animation-iteration-count 定义动画的播放次数。
• animation-direction 指定是否应该轮流反向播放动画。
• animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
• animation-play-state 指定动画是否正在运行或已暂停。
• linear 动画从头到尾的速度是相同的。
• ease 默认。动画以低速开始，然后加快，在结束前变慢。
• ease-in 动画以低速开始。
• ease-out 动画以低速结束。
• ease-in-out 动画以低速开始和结束。
• infinite 无限播放
• normal 默认值。动画按正常播放。 测试 »
• reverse 动画反向播放。 测试 »
• alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。 测试 »
• alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。

@keyframes

使用@keyframes规则，你可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中，您可以更改CSS样式的设定多次。指定的变化时发生时使用%，或关键字“from”和“to”，这是和0%到100%相同。

	.box2 {
				width: 200px;
				height: 200px;
				background-color: red;
				animation: move 3s linear 0s 1 normal forwards;
			}
			@keyframes move{
				from{
					width: 200px;
					background-color: red;
				}
				to{
					width: 500px;
					height: 500px;
					background-color: orange;
				}
			}

代码效果（下面图是结束效果）