通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

浏览器支持

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。
注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。

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

  1. 规定您希望把效果添加到哪个 CSS 属性上
  2. 规定效果的时长

例子：
应用于宽度属性的过渡效果，时长为 2 秒：

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

注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。
效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时：
实例
规定当鼠标指针悬浮于

元素上时：
div:hover
{
width:300px;
}

过渡属性

下面的表格列出了所有的转换属性：

属性 描述 CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3

过渡属性

1、控制css样式变化的过程
2、过渡 — transition

  1. 允许css属性值在一定的时间区间内平滑的过渡（动画形成的过程）
  2. 在鼠标点击，获得焦点，被单击或者对元素任何改变中触发并圆滑的以动画效果改变css属性值

3、兼容性：ie10+ firefox16+ chrome26+ safari6.1+ opera12.1+

总结：过渡就是一个元素，他的属性从一个值变化到另一个值。

transition-property属性

1、检索或者设置对象中的参与过渡的属性 — 指的就是要过渡到哪一个属性
2、语法：none | all | property

  1. none 没有属性变化
  2. all 所有属性都会改变 — 默认值
  3. property 元素属性名

transition-duration属性

1、检索或者设置对象过渡的持续时间
2、语法： time
3、参数说明：

  1. 规定完成或者效果完成所需要的花费的时间（s ms）
  2. 默认值：0

不同的过渡曲线有不同的过渡效果，以下四种（过渡时间：2s）：

  1. 慢 - 快 - 慢
  2. 快 - 慢
  3. 慢 - 快
  4. 匀速

transition-timing-function属性

1、检索或者设置对象中的过渡的动画类型
image.png

transition-delay属性

1、检索或者设置对象延迟过渡的时间 — 过渡的属性是立刻执行还是延迟执行
2、语法：time
3、参数说明：

  1. 指定秒或者毫秒之前等待效果的开始
  2. 默认值0 — 不延迟，立即执行

transition的综合

1、transition：复合属性，检索或者设置对象变化时的过渡
2、语法;：transition：property duration timing-function delay；

过渡属性的总结

  1. transition-property：指定属性名
  2. transition-duration：过渡时间
  3. transition-timing-function：过渡方法
  4. transition-delay：延迟
    1. <head>
    2.  <meta charset="UTF-8">
    3.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    4.  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    5.  <title>CSS3 过渡效果</title>
    6.  <style>
    7.      div {
    8.          width: 200px;
    9.          height: 100px;
    10.          background-color: pink;
    11.          /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
    12.          /* transition: width .5s ease 0s, height .5s ease 1s; */
    13.          /* 如果想要写多个属性，利用逗号进行分割 */
    14.          /* transition: width .5s, height .5s; */
    15.          /* 如果想要多个属性都变化，属性写all就可以了 */
    16.          /* transition: height .5s ease 1s; */
    17.          /* 谁做过渡，给谁加 */
    18.          transition: all 0.5s;
    19.      }
    20.      div:hover {
    21.          width: 400px;
    22.          height: 200px;
    23.          background-color: skyblue;
    24.      }
    25.  </style>
    26. </head>
    27. <body>
    28.  <div></div>
    29. </body>