本页目录： <a href="#id1">用前思考</a> <a href="#id2">怎么使用</a> <a href="#id3">浏览器支持</a> 
CSS3的过渡属性： 过渡属性可以设定元素在某些属性改变时，对变化过程填充逐渐变换的动画，类似于flash的补间动画
<h2 class="group flex justify-start items-center">用前思考<a name="用前思考" aria-label="Anchor" id="用前思考" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#用前思考">#</a></h2>CSS3 过渡是元素从一种样式逐渐改变为另一种的效果 那么我们仔细来分析一下，机器需要哪些数据来控制这个补间动画
首先我们问问自己，如果别人要求我们来实现一种补间动画，我们会问要求人哪些问题呢？
<ol>
<li>是对哪些变化进行补间动画效果？- what </li>
<li>是怎么变的？补间时长、补间线性(渐入渐出|平滑变化) - how </li>
<li>补间是马上就开始吗？ - when</li>
</ol>
好了，有了这些的问题，看下面的内容也就顺多了。 
<h2 class="group flex justify-start items-center">怎么使用<a name="怎么使用" aria-label="Anchor" id="怎么使用" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#怎么使用">#</a></h2><h4 class="group flex justify-start items-center">语法：<a name="语法：" aria-label="Anchor" id="语法：" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#语法：">#</a></h4><ul>
<li><code>transition</code> 简写属性，用于在一个属性中设置下面四个过渡属性。 示例： <code>transition: width 1s linear 2s;</code> </li>
<li><code>transition-property</code> all/propertys/none 规定应用过渡的 CSS 属性的名称。propertys间用逗号分隔。
 示例： <code>transition-property: width,margin;</code> </li>
<li><code>transition-duration</code> Number 定义过渡效果花费的时间。默认是 0。 </li>
<li><code>transition-timing-function</code> 规定过渡效果的时间曲线。默认是 &quot;ease&quot;。 linear ： 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ease ： 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in ： 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out ： 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out ： 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 cubic-bezier(n,n,n,n) ： 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 </li>
<li><code>transition-delay</code> 规定过渡效果何时开始。默认是 0。</li>
</ul>
<h4 class="group flex justify-start items-center">效果：<a name="效果：" aria-label="Anchor" id="效果：" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#效果：">#</a></h4><a href="http://www.w3school.com.cn/tiy/t.asp?f=css3_transition1">参考W3school的demo</a>
<h2 class="group flex justify-start items-center">浏览器支持<a name="浏览器支持" aria-label="Anchor" id="浏览器支持" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#浏览器支持">#</a></h2><img src="https://ws1.sinaimg.cn/large/0069RVTdgy1fup7uarmc3j30u204sjsn.jpg" alt=""> Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。 Safari 需要前缀 -webkit-。

CSS3过渡

CSS3新增属性

CSS3 新增的动画属性： 通过 CSS3 动画，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画 以及 JavaScript。作为页面切换的交互动画。
NOTE：
<ol>
<li> 一个元素要使用多个动画时（比如前一秒动画 1，后面动画 2），可以在 css 属性中用一个 animation 表示，动画之间用逗号相隔。例子：<code>animation: animation1 1s, animation2 1s 1s infinite alternate ;</code></li>
</ol>
<h2 class="group flex justify-start items-center">怎么使用<a name="怎么使用" aria-label="Anchor" id="怎么使用" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#怎么使用">#</a></h2>首先用我的话来大致概括一下 css3 动画的使用流程：
<ol>
<li>首先定义一个动画，使用<code>@keyframes</code>来定义动画(包括动画名、动画过程状态)</li>
<li>在一个元素的 class 中引用刚定义的动画，设定相关参数(动画时长、动画线性、动画延迟、元素开始和结束的状态、动画是否暂停 )</li>
</ol>
这样一个 css3 动画就被定义和使用了。
<a href="" id="id11"></a>
<h4 class="group flex justify-start items-center">1. 定义动画<a name="1.-定义动画" aria-label="Anchor" id="1.-定义动画" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#1.-定义动画">#</a></h4><h4 class="group flex justify-start items-center">语法：<a name="语法：" aria-label="Anchor" id="语法：" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#语法：">#</a></h4><ul>
<li><code>@keyframes</code> @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能作为动画中某一帧的状态。 示例： 规定一个名叫<code>myAnimation</code>的动画
<pre><code class="language-css">@keyframes myAnimation {
 0% {
 background: red;
 }
 25% {
 background: yellow;
 }
 50% {
 background: blue;
 }
 100% {
 background: green;
 }
}

@-moz-keyframes myAnimation /* Firefox */ {
 0% {
 background: red;
 }
 25% {
 background: yellow;
 }
 50% {
 background: blue;
 }
 100% {
 background: green;
 }
}

@-webkit-keyframes myAnimation /* Safari 和 Chrome */ {
 0% {
 background: red;
 }
 25% {
 background: yellow;
 }
 50% {
 background: blue;
 }
 100% {
 background: green;
 }
}

@-o-keyframes myAnimation /* Opera */ {
 0% {
 background: red;
 }
 25% {
 background: yellow;
 }
 50% {
 background: blue;
 }
 100% {
 background: green;
 }
}
</code></pre>
</li>
</ul>
<a href="" id="id12"></a>
<h4 class="group flex justify-start items-center">2. 引用动画，设定参数<a name="2.-引用动画，设定参数" aria-label="Anchor" id="2.-引用动画，设定参数" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#2.-引用动画，设定参数">#</a></h4>在要设定动画的元素 class 上使用
<h4 class="group flex justify-start items-center">语法：<a name="语法：" aria-label="Anchor" id="语法：" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#语法：">#</a></h4><ul>
<li><code>animation</code> 所有动画属性的简写属性，除了 animation-play-state 和 animation-fill-mode 属性。 语法： <code>animation: name duration timing-function delay iteration-count direction;</code> 语法参数含义参看后面的语法解析。 示例：
<pre><code class="language-css">div {
 animation: myAnimation 5s infinite;
 -webkit-animation: myAnimation 5s infinite; /* Safari 和 Chrome */
}
</code></pre>
</li>
<li><code>animation-name</code> 要引用 @keyframes 动画的名称。
</li>
<li><code>animation-duration</code> 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
</li>
<li><code>animation-timing-function</code> 规定动画的速度曲线。默认是 &quot;ease&quot;。 语法： <code>animation-timing-function: value;</code> _linear_： 动画从头到尾的速度是相同的。 _ease_： 默认。动画以低速开始，然后加快，在结束前变慢。 _ease-in_： 动画以低速开始。 _ease-out_： 动画以低速结束。 _ease-in-out_： 动画以低速开始和结束。 _cubic-bezier(n,n,n,n)_： 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 示例：
<pre><code class="language-css">/* W3C 和 Opera: */
#div1 {
 animation-timing-function: linear;
}

/* Firefox: */
#div1 {
 -moz-animation-timing-function: linear;
}

/* Safari 和 Chrome: */
#div1 {
 -webkit-animation-timing-function: linear;
}
</code></pre>
</li>
<li><code>animation-delay</code> 规定动画何时开始。默认是 0。
</li>
<li><code>animation-iteration-count</code> 规定动画被播放的次数。默认是 1。 语法： <code>animation-iteration-count: value;</code> _n_： 定义动画播放次数的数值。 _infinite_： 规定动画应该无限次播放。 示例：
<pre><code class="language-css">div {
 animation-iteration-count: 3;
 -webkit-animation-iteration-count: 3; /* Safari 和 Chrome */
}
</code></pre>
</li>
<li><code>animation-direction</code> 规定动画是否在下一周期逆向地播放。默认是 &quot;normal&quot;。 语法： <code>animation-direction: normal|alternate;</code> _normal_： 默认值。动画应该正常播放。 _alternate_： 动画应该轮流反向播放。 示例：
<pre><code class="language-css">div {
 animation-direction: alternate;
 -webkit-animation-direction: alternate; /* Safari 和 Chrome */
}
</code></pre>
</li>
<li><code>animation-play-state</code> 规定动画是否正在运行或暂停。默认是 &quot;running&quot;。 语法： <code>animation-play-state: paused|running;</code> _paused_： 规定动画已暂停。 _running_： 规定动画正在播放。 示例：
<pre><code class="language-css">div {
 animation-play-state: paused;
 -webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
</code></pre>
</li>
<li><code>animation-fill-mode</code> 规定对象动画时间之外的状态。 语法： <code>animation-fill-mode : none | forwards | backwards | both;</code> _none_： 不改变默认行为。 _forwards_： 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 _backwards_： 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 _both_： 向前和向后填充模式都被应用。 示例：
<pre><code class="language-css">div {
 animation-fill-mode: forwards;
 -webkit-animation-fill-mode: forwards; /* Safari 和 Chrome */
}
</code></pre>
</li>
</ul>
<h4 class="group flex justify-start items-center">效果：<a name="效果：" aria-label="Anchor" id="效果：" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#效果：">#</a></h4><a href="http://www.w3school.com.cn/tiy/t.asp?f=css3_animation4"> 参考 W3school 的 demo</a>
<a href="" id="id3"></a>
<h2 class="group flex justify-start items-center">浏览器支持<a name="浏览器支持" aria-label="Anchor" id="浏览器支持" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#浏览器支持">#</a></h2><img src="https://ws2.sinaimg.cn/large/0069RVTdgy1fupd51aiv4j30u209k76w.jpg" alt=""> Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。 Chrome 和 Safari 需要前缀 -webkit-。

CSS3过渡

用前思考#

怎么使用#

语法：#

效果：#

浏览器支持#