CSS3中的变形与动画（上）

transform：rotate | scale | skew | transtate

旋转：rotate（Xdeg）

缩放：scale（number）

scaleX() / scaleY()

默认x轴y轴同时缩放

扭曲：skew：扭曲：

移动：translate（）

倾斜：skew（Xdeg）

位移：translate（x，y）

translateX()  /  translateY

变形远点：

transform-origin：x% y%

transition过渡动画

概述：过渡动画特效

语法：transtion：属性名

eg：

    transition-property：width；

    transition-delay：2s；规定过渡何时开始

    transition-duration：2s；持续时间

    解释：将元素的宽属性形成2s的过渡效果

Animation动画

概述：通过 @keyframes 规则，您能够创建动画。

以百分比来规定改变发生的时间，或者通过关键词 “from” 和

"to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

语法：@keyframes animationname

{keyframes-selector  {css-styles;}}

参数： animationname：定义动画的名称

keyframes-selector：动画时长的百分比。

from（与0%相同）

to(与100%相同)

ss-styles：一个或多个合法的 CSS 样式属性