transition过渡-------animation动画

过渡是什么？

过渡：过渡是元素从一种样式逐渐改变为另一种的效果。.

简单的过渡效果

 一个宽度在 两秒内变宽的矩形 代码如下：

css

div {
	width: 100px;
	height: 100px;
	background: red;
	transition: width 2s;
}
div:hover {
	width: 200px;
}

html 

<div></div>

transition-timing-function属性规定过渡效果的速度曲线。

属性接受的值有以下几种：

值	作用
ease	规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear	规定从开始到结束具有相同速度的过渡效果
ease-in	规定缓慢开始的过渡效果
ease-out	规定缓慢结束的过渡效果
ease-in-out	规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n)	允许您在三次贝塞尔函数中定义自己的值