过渡

1. CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
2. 要实现这一点，必须规定两项内容：

   规定您希望把效果添加到哪个 CSS属性上：transition-property

   规定效果的时长:transition-duration

示例

div
{
width:100px
transition: width 2s;
-moz-transition: width 2s;    /* Firefox 4 */
-webkit-transition: width 2s;    /* Safari 和 Chrome */
-o-transition: width 2s;    /* Opera */
}

div:hover
{
width:300px;
}

transition-property属性

1. transition-property 属性用于指定应用过渡效果的CSS属性的名称，其过渡效果通常在用户将指针移动到元素上时发生。当指定的CSS属性改变时，过渡效果才开始。
2. 基本语法格式：

   transition-property: none | all | property;
   

   none:没有属性会获得过渡效果。

   all:所有属性都将获得过渡效果。

   property:定义应用过渡效果的CSS属性名称，多个属性之间以逗号分隔。

transition-duration属性

1. transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）
2. 基本语法格式：

   transition-duration:time;
   

transition-timing-function属性

1. 用于规定过渡效果的速度曲线，默认值为ease。
2. 基本语法格式：

   transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
   

transition-delay属性

1. 规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。
2. 可以为正整数、负整数和0。当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断；设置为正数时，过渡动作会延迟触发。
3. 基本语法格式：

   transition-delay:time;
   

transition属性

1. 复合属性: 在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性
2. 基本语法格式：

   transition：property duration timing-function delay;
   

3. 各个参数必须按照顺序进行定义，不能颠倒。

变换

1. transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
2. 基本语法：

   transform: none|transform-functions;
   

3. 变换函数
4. 案例练习：3D变换

动画

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

捆绑到选择器

把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;    /* Firefox */
-webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
-o-animation: myfirst 5s;    /* Opera */
}