CSS过渡、2D转换及动画

CSS过渡（transition)定义：

是元素从一种样式逐渐改变为另一种效果。

基本属性：

transition-delay 属性规定过滤效果的延迟

transition-duration 规定过滤效果要持续多少秒或毫秒

transition-property规定过渡效果所针对的 CSS 属性的名称

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

2D转换

通过CSStransform属性，可以利用一下2D转换方式：

translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）

rotate() 方法根据给定的角度顺时针或逆时针旋转元素

scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）

scaleX() 方法增加或减少元素的宽度

scaleY() 方法增加或减少元素的高度

skewX() 方法使元素沿 X 轴倾斜给定角度

skewY() 方法使元素沿 Y 轴倾斜给定角度

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度

matrix() 方法把所有 2D 变换方法组合为一个；方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素        

CSS动画

定义：动画使元素逐渐从一种样式变为另一种样式。您可以随意更改任意数量的 CSS 属性。如需使用 CSS 动画，您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式

第一步：定义动画

第二步： 引入动画

图1：

图2 

效果：图1到图2