root
/
myBlogs_2


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
							<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>css动画 | 看白鹿的博客</title>
    <meta name="description" content="只有敢于尝试,才能品味人生.">
    <link rel="icon" href="/logo.png">
    
    <link rel="preload" href="/assets/css/0.styles.a2e0d1a2.css" as="style"><link rel="preload" href="/assets/js/app.9558671e.js" as="script"><link rel="preload" href="/assets/js/3.515b53d6.js" as="script"><link rel="preload" href="/assets/js/67.8184d78b.js" as="script"><link rel="prefetch" href="/assets/js/10.f724d0ba.js"><link rel="prefetch" href="/assets/js/100.5834781e.js"><link rel="prefetch" href="/assets/js/101.21b366b3.js"><link rel="prefetch" href="/assets/js/102.2ae747f3.js"><link rel="prefetch" href="/assets/js/103.093cd825.js"><link rel="prefetch" href="/assets/js/104.22c3355f.js"><link rel="prefetch" href="/assets/js/105.0d2c6d27.js"><link rel="prefetch" href="/assets/js/106.57e86379.js"><link rel="prefetch" href="/assets/js/107.3859929f.js"><link rel="prefetch" href="/assets/js/108.305f4abf.js"><link rel="prefetch" href="/assets/js/109.bfba36ff.js"><link rel="prefetch" href="/assets/js/11.8006ec70.js"><link rel="prefetch" href="/assets/js/110.b67873d6.js"><link rel="prefetch" href="/assets/js/111.39112c80.js"><link rel="prefetch" href="/assets/js/112.6452e3ad.js"><link rel="prefetch" href="/assets/js/113.60c65ce6.js"><link rel="prefetch" href="/assets/js/114.955a027b.js"><link rel="prefetch" href="/assets/js/115.dd036aff.js"><link rel="prefetch" href="/assets/js/116.14835fbf.js"><link rel="prefetch" href="/assets/js/117.c79a8c90.js"><link rel="prefetch" href="/assets/js/118.c0e2c0d9.js"><link rel="prefetch" href="/assets/js/12.005e0dbb.js"><link rel="prefetch" href="/assets/js/13.ff4ae139.js"><link rel="prefetch" href="/assets/js/14.836a5132.js"><link rel="prefetch" href="/assets/js/15.6f048cfc.js"><link rel="prefetch" href="/assets/js/16.d91b81f0.js"><link rel="prefetch" href="/assets/js/17.f2e82e43.js"><link rel="prefetch" href="/assets/js/18.4e4cd572.js"><link rel="prefetch" href="/assets/js/19.3b203b0f.js"><link rel="prefetch" href="/assets/js/20.7a5c58ab.js"><link rel="prefetch" href="/assets/js/21.97e7a824.js"><link rel="prefetch" href="/assets/js/22.c2c71341.js"><link rel="prefetch" href="/assets/js/23.af6cefca.js"><link rel="prefetch" href="/assets/js/24.8a375cba.js"><link rel="prefetch" href="/assets/js/25.238ba08c.js"><link rel="prefetch" href="/assets/js/26.9c2191ba.js"><link rel="prefetch" href="/assets/js/27.aa86acfc.js"><link rel="prefetch" href="/assets/js/28.858301d1.js"><link rel="prefetch" href="/assets/js/29.808ea0c3.js"><link rel="prefetch" href="/assets/js/30.e9907d4a.js"><link rel="prefetch" href="/assets/js/31.c87c923f.js"><link rel="prefetch" href="/assets/js/32.4b1edff8.js"><link rel="prefetch" href="/assets/js/33.73f494d0.js"><link rel="prefetch" href="/assets/js/34.50a183ad.js"><link rel="prefetch" href="/assets/js/35.7df7ce1e.js"><link rel="prefetch" href="/assets/js/36.349910a5.js"><link rel="prefetch" href="/assets/js/37.d0f9f5f8.js"><link rel="prefetch" href="/assets/js/38.fb3a1bd1.js"><link rel="prefetch" href="/assets/js/39.601de504.js"><link rel="prefetch" href="/assets/js/4.389f8161.js"><link rel="prefetch" href="/assets/js/40.08558ea8.js"><link rel="prefetch" href="/assets/js/41.9cab78b4.js"><link rel="prefetch" href="/assets/js/42.570f67c5.js"><link rel="prefetch" href="/assets/js/43.41766314.js"><link rel="prefetch" href="/assets/js/44.61865afc.js"><link rel="prefetch" href="/assets/js/45.b4d6c042.js"><link rel="prefetch" href="/assets/js/46.ab1face5.js"><link rel="prefetch" href="/assets/js/47.cfc26f59.js"><link rel="prefetch" href="/assets/js/48.b14654a7.js"><link rel="prefetch" href="/assets/js/49.6598379f.js"><link rel="prefetch" href="/assets/js/5.d4651190.js"><link rel="prefetch" href="/assets/js/50.1278be5c.js"><link rel="prefetch" href="/assets/js/51.7fd917c5.js"><link rel="prefetch" href="/assets/js/52.25b15acf.js"><link rel="prefetch" href="/assets/js/53.2e62bed5.js"><link rel="prefetch" href="/assets/js/54.af31649a.js"><link rel="prefetch" href="/assets/js/55.e6c76277.js"><link rel="prefetch" href="/assets/js/56.59b2e0fa.js"><link rel="prefetch" href="/assets/js/57.e75a4f7d.js"><link rel="prefetch" href="/assets/js/58.f45feb68.js"><link rel="prefetch" href="/assets/js/59.21a7b545.js"><link rel="prefetch" href="/assets/js/6.4bfb03ad.js"><link rel="prefetch" href="/assets/js/60.d5bd9a2b.js"><link rel="prefetch" href="/assets/js/61.dc32bd44.js"><link rel="prefetch" href="/assets/js/62.552676dd.js"><link rel="prefetch" href="/assets/js/63.86db7a84.js"><link rel="prefetch" href="/assets/js/64.eb8d2554.js"><link rel="prefetch" href="/assets/js/65.405a53d2.js"><link rel="prefetch" href="/assets/js/66.a56465a2.js"><link rel="prefetch" href="/assets/js/68.c56c64fe.js"><link rel="prefetch" href="/assets/js/69.6b654ce5.js"><link rel="prefetch" href="/assets/js/7.5373c3ff.js"><link rel="prefetch" href="/assets/js/70.9a186317.js"><link rel="prefetch" href="/assets/js/71.ac0a8a64.js"><link rel="prefetch" href="/assets/js/72.b10eb62e.js"><link rel="prefetch" href="/assets/js/73.8d0ed403.js"><link rel="prefetch" href="/assets/js/74.903a6ec9.js"><link rel="prefetch" href="/assets/js/75.b4770f9b.js"><link rel="prefetch" href="/assets/js/76.38bc39a3.js"><link rel="prefetch" href="/assets/js/77.f9865d6b.js"><link rel="prefetch" href="/assets/js/78.10f6bd6c.js"><link rel="prefetch" href="/assets/js/79.a9255312.js"><link rel="prefetch" href="/assets/js/8.be3a48f4.js"><link rel="prefetch" href="/assets/js/80.02b17ee8.js"><link rel="prefetch" href="/assets/js/81.a1112357.js"><link rel="prefetch" href="/assets/js/82.4568ca67.js"><link rel="prefetch" href="/assets/js/83.49710233.js"><link rel="prefetch" href="/assets/js/84.533366f2.js"><link rel="prefetch" href="/assets/js/85.97dbc2cd.js"><link rel="prefetch" href="/assets/js/86.6514a49a.js"><link rel="prefetch" href="/assets/js/87.0c59077d.js"><link rel="prefetch" href="/assets/js/88.1df289b4.js"><link rel="prefetch" href="/assets/js/89.7269909c.js"><link rel="prefetch" href="/assets/js/9.db31af68.js"><link rel="prefetch" href="/assets/js/90.272a0e37.js"><link rel="prefetch" href="/assets/js/91.72195388.js"><link rel="prefetch" href="/assets/js/92.f6e0c47a.js"><link rel="prefetch" href="/assets/js/93.36e0cacd.js"><link rel="prefetch" href="/assets/js/94.f5c4f682.js"><link rel="prefetch" href="/assets/js/95.8408e244.js"><link rel="prefetch" href="/assets/js/96.a71354b0.js"><link rel="prefetch" href="/assets/js/97.4fb8b67b.js"><link rel="prefetch" href="/assets/js/98.785be908.js"><link rel="prefetch" href="/assets/js/99.219eebc3.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.431cfe91.js">
    <link rel="stylesheet" href="/assets/css/0.styles.a2e0d1a2.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">看白鹿的博客</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/CSS/" class="nav-link router-link-active">CSS</a></li><li class="dropdown-item"><!----> <a href="/FLUTTER/" class="nav-link">flutter</a></li><li class="dropdown-item"><!----> <a href="/GIT/" class="nav-link">GIT</a></li><li class="dropdown-item"><!----> <a href="/JavaScript/" class="nav-link">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/REACT/" class="nav-link">react</a></li><li class="dropdown-item"><!----> <a href="/VUE/" class="nav-link">vue</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后台" class="dropdown-title"><span class="title">后台</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/NODE/" class="nav-link">node</a></li><li class="dropdown-item"><!----> <a href="/UBUNTU/" class="nav-link">ubuntu</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其他" class="dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/IDE/" class="nav-link">IDE</a></li><li class="dropdown-item"><!----> <a href="/About/WHY.html" class="nav-link">待了解</a></li><li class="dropdown-item"><!----> <a href="/INTERVIEW/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/hello/" class="nav-link">你好</a></li></ul></div></div><div class="nav-item"><a href="https://github.com/Johnhong9527" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/CSS/" class="nav-link router-link-active">CSS</a></li><li class="dropdown-item"><!----> <a href="/FLUTTER/" class="nav-link">flutter</a></li><li class="dropdown-item"><!----> <a href="/GIT/" class="nav-link">GIT</a></li><li class="dropdown-item"><!----> <a href="/JavaScript/" class="nav-link">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/REACT/" class="nav-link">react</a></li><li class="dropdown-item"><!----> <a href="/VUE/" class="nav-link">vue</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后台" class="dropdown-title"><span class="title">后台</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/NODE/" class="nav-link">node</a></li><li class="dropdown-item"><!----> <a href="/UBUNTU/" class="nav-link">ubuntu</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其他" class="dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/IDE/" class="nav-link">IDE</a></li><li class="dropdown-item"><!----> <a href="/About/WHY.html" class="nav-link">待了解</a></li><li class="dropdown-item"><!----> <a href="/INTERVIEW/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/hello/" class="nav-link">你好</a></li></ul></div></div><div class="nav-item"><a href="https://github.com/Johnhong9527" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/CSS/" class="sidebar-link">CSS 目录</a></li><li><a href="/CSS/cases.html" class="sidebar-link">案例收集</a></li><li><a href="/CSS/2018_10_21_01.html" class="sidebar-link">1px 边框问题</a></li><li><a href="/CSS/2018_10_21_02.html" class="sidebar-link">border-style</a></li><li><a href="/CSS/2018_10_21_03.html" class="sidebar-link">box-flex使用说明</a></li><li><a href="/CSS/2018_10_21_04.html" class="active sidebar-link">css动画</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_04.html#animation" class="sidebar-link">animation</a></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_04.html#animation-delay" class="sidebar-link">animation-delay</a></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_04.html#animation-direction" class="sidebar-link">animation-direction</a></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_04.html#animation-duration" class="sidebar-link">animation-duration</a></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_04.html#animation-fill-mode" class="sidebar-link">animation-fill-mode</a></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_04.html#animation-name" class="sidebar-link">animation-name</a></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_04.html#animation-play-state" class="sidebar-link">animation-play-state</a></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_04.html#animation-timing-function" class="sidebar-link">animation-timing-function</a></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_04.html#faq" class="sidebar-link">FAQ</a></li><li class="sidebar-sub-header"><a href="/CSS/2018_10_21_04.html#cylon-眼睛" class="sidebar-link">Cylon 眼睛</a></li></ul></li><li><a href="/CSS/2018_10_21_05.html" class="sidebar-link">加速网站的最佳实践</a></li><li><a href="/CSS/principle.html" class="sidebar-link">CSS盒子</a></li><li><a href="/CSS/2019_04_11_01.html" class="sidebar-link">Grid 布局教程</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css动画"><a href="#css动画" class="header-anchor">#</a> css动画</h1> <h2 id="animation"><a href="#animation" class="header-anchor">#</a> animation</h2> <p>CSS animation属性是如下属性的一个简写属性形式: <br>
animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction 和 animation-fill-mode.</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/* @keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name */</span>
  <span class="token property">animation</span><span class="token punctuation">:</span> 3s ease-in 1s 2 reverse both paused slidein<span class="token punctuation">;</span>

<span class="token comment">/* @keyframes duration | timing-function | delay | name */</span>
  <span class="token property">animation</span><span class="token punctuation">:</span> 3s linear 1s slidein<span class="token punctuation">;</span>

<span class="token comment">/* @keyframes duration | name */</span>
  <span class="token property">animation</span><span class="token punctuation">:</span> 3s slidein<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="animation-delay"><a href="#animation-delay" class="header-anchor">#</a> animation-delay</h2> <p>定义:</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>CSS属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>语法:</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">animation-delay</span><span class="token punctuation">:</span> 3s<span class="token punctuation">;</span>
<span class="token property">animation-delay</span><span class="token punctuation">:</span> 2s<span class="token punctuation">,</span> 4ms<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="animation-direction"><a href="#animation-direction" class="header-anchor">#</a> animation-direction</h2> <p>定义:</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>CSS 属性指示动画是否反向播放，它通常在简写属性animation中设定
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>语法:</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">animation-direction</span><span class="token punctuation">:</span> normal
<span class="token property">animation-direction</span><span class="token punctuation">:</span> reverse
<span class="token property">animation-direction</span><span class="token punctuation">:</span> alternate
<span class="token property">animation-direction</span><span class="token punctuation">:</span> alternate-reverse
<span class="token property">animation-direction</span><span class="token punctuation">:</span> normal<span class="token punctuation">,</span> reverse
<span class="token property">animation-direction</span><span class="token punctuation">:</span> alternate<span class="token punctuation">,</span> reverse<span class="token punctuation">,</span> normal
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><table><thead><tr><th style="text-align:left;">属性</th> <th>作用</th></tr></thead> <tbody><tr><td style="text-align:left;">normal</td> <td>每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。</td></tr> <tr><td style="text-align:left;">alternate</td> <td>动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代</td></tr> <tr><td style="text-align:left;">reverse</td> <td>反向运行动画，每周期结束动画由尾到头运行。</td></tr> <tr><td style="text-align:left;">alternate-reverse</td> <td>反向交替， 反向开始交替;动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。</td></tr></tbody></table> <h2 id="animation-duration"><a href="#animation-duration" class="header-anchor">#</a> animation-duration</h2> <p>定义:</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>属性指定一个动画周期的时长。
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>语法:</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">animation-duration</span><span class="token punctuation">:</span> 6s
<span class="token property">animation-duration</span><span class="token punctuation">:</span> 120ms
<span class="token property">animation-duration</span><span class="token punctuation">:</span> 1s<span class="token punctuation">,</span> 15s
<span class="token property">animation-duration</span><span class="token punctuation">:</span> 10s<span class="token punctuation">,</span> 30s<span class="token punctuation">,</span> 230ms
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><table><thead><tr><th style="text-align:left;">属性</th> <th>作用</th></tr></thead> <tbody><tr><td style="text-align:left;">time</td> <td>一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。</td></tr></tbody></table> <h2 id="animation-fill-mode"><a href="#animation-fill-mode" class="header-anchor">#</a> animation-fill-mode</h2> <p>定义:</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>这个 CSS 属性用来指定在动画执行之前和之后如何给动画的目标应用样式。
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>语法</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/* &lt;single-animation-fill-mode&gt; = none | forwards | backwards | both */</span>
<span class="token property">animation-fill-mode</span><span class="token punctuation">:</span> none
<span class="token property">animation-fill-mode</span><span class="token punctuation">:</span> forwards
<span class="token property">animation-fill-mode</span><span class="token punctuation">:</span> backwards
<span class="token property">animation-fill-mode</span><span class="token punctuation">:</span> both
<span class="token comment">/* 可以应用多个参数，这个时候使用逗号隔开  */</span>
<span class="token comment">/* 各个参数应用于与次序相对应的动画名 */</span>
<span class="token property">animation-fill-mode</span><span class="token punctuation">:</span> none<span class="token punctuation">,</span> backwards
<span class="token property">animation-fill-mode</span><span class="token punctuation">:</span> both<span class="token punctuation">,</span> forwards<span class="token punctuation">,</span> none
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><blockquote><p>none<br>
动画执行前后不改变任何样式
forwards<br>
目标保持动画最后一帧的样式，最后一帧是哪个取决于animation-direction和 animation-iteration-count:</p></blockquote> <table><thead><tr><th style="text-align:center;">animation-direction</th> <th style="text-align:center;">animation-iteration-count</th> <th style="text-align:center;">last keyframe encountered</th></tr></thead> <tbody><tr><td style="text-align:center;">normal</td> <td style="text-align:center;">even or odd</td> <td style="text-align:center;">100% or to</td></tr> <tr><td style="text-align:center;">reverse</td> <td style="text-align:center;">even or odd</td> <td style="text-align:center;">0% or from</td></tr> <tr><td style="text-align:center;">alternate</td> <td style="text-align:center;">even</td> <td style="text-align:center;">0% or from</td></tr> <tr><td style="text-align:center;">alternate</td> <td style="text-align:center;">odd</td> <td style="text-align:center;">100% or to</td></tr> <tr><td style="text-align:center;">alternate-reverse</td> <td style="text-align:center;">even</td> <td style="text-align:center;">100% or to</td></tr> <tr><td style="text-align:center;">alternate-reverse</td> <td style="text-align:center;">odd</td> <td style="text-align:center;">0% or from</td></tr></tbody></table> <blockquote><p>backwards<br>
动画采用相应第一帧的样式，保持 animation-delay，第一帧取法如下：</p></blockquote> <table><thead><tr><th style="text-align:left;">animation-direction</th> <th style="text-align:center;">first relevant keyframe</th></tr></thead> <tbody><tr><td style="text-align:left;">normal or alternate</td> <td style="text-align:center;">0% or from</td></tr> <tr><td style="text-align:left;">reverse or alternate-reverse</td> <td style="text-align:center;">100% or to</td></tr></tbody></table> <blockquote><p>both<br>
动画将会执行 forwards 和 backwards 执行的动作。</p></blockquote> <p>animation-iteration-count
定义:</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>CSS 属性   定义动画在结束前运行的次数 可以是1次 无限循环.
默认属性 animation 默认播放动画循环一次.
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>语法:</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/* 使用规范 &lt;single-animation-iteration-count&gt; = infinite | &lt;number&gt; */</span>
<span class="token property">animation-iteration-count</span><span class="token punctuation">:</span> infinite<span class="token punctuation">;</span>
<span class="token property">animation-iteration-count</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
<span class="token property">animation-iteration-count</span><span class="token punctuation">:</span> 2.3<span class="token punctuation">;</span>
<span class="token property">animation-iteration-count</span><span class="token punctuation">:</span> 2<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> infinite<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="animation-name"><a href="#animation-name" class="header-anchor">#</a> animation-name</h2> <p>定义</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/* Single animation */</span>
<span class="token property">animation-name</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token property">animation-name</span><span class="token punctuation">:</span> test_05<span class="token punctuation">;</span>
<span class="token property">animation-name</span><span class="token punctuation">:</span> -specific<span class="token punctuation">;</span>
<span class="token property">animation-name</span><span class="token punctuation">:</span> sliding-vertically<span class="token punctuation">;</span>

<span class="token comment">/* Multiple animations */</span>
<span class="token property">animation-name</span><span class="token punctuation">:</span> test1<span class="token punctuation">,</span> animation4<span class="token punctuation">;</span>
<span class="token property">animation-name</span><span class="token punctuation">:</span> none<span class="token punctuation">,</span> -moz-specific<span class="token punctuation">,</span> sliding<span class="token punctuation">;</span>

<span class="token comment">/* Global values */</span>
<span class="token property">animation-name</span><span class="token punctuation">:</span> initial
<span class="token property">animation-name</span><span class="token punctuation">:</span> inherit
<span class="token property">animation-name</span><span class="token punctuation">:</span> unset
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="animation-play-state"><a href="#animation-play-state" class="header-anchor">#</a> animation-play-state</h2> <p>定义:</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>CSS 属性定义一个动画是否运行或者暂停。
可以通过查询它来确定动画是否正在运行。
另外，它的值可以被设置为暂停和恢复的动画的重放。
恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>语法</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/* 正式语法 =&gt; &lt;single-animation-play-state&gt; = running | paused */</span>
<span class="token comment">/* Single animation=&gt;单一动画 */</span>
<span class="token property">animation-play-state</span><span class="token punctuation">:</span> running<span class="token punctuation">;</span>
<span class="token property">animation-play-state</span><span class="token punctuation">:</span> paused<span class="token punctuation">;</span>

<span class="token comment">/* Multiple animations=&gt;多个动画 */</span>
<span class="token property">animation-play-state</span><span class="token punctuation">:</span> paused<span class="token punctuation">,</span> running<span class="token punctuation">,</span> running<span class="token punctuation">;</span>

<span class="token comment">/* Global values=&gt;全球价值 */</span>
<span class="token property">animation-play-state</span><span class="token punctuation">:</span> inherited<span class="token punctuation">;</span>
<span class="token property">animation-play-state</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span>
<span class="token property">animation-play-state</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><table><thead><tr><th style="text-align:left;">属性</th> <th>注释</th></tr></thead> <tbody><tr><td style="text-align:left;">running</td> <td>当前动画正在运行。</td></tr> <tr><td style="text-align:left;">paused</td> <td>当前动画以被停止。</td></tr></tbody></table> <h2 id="animation-timing-function"><a href="#animation-timing-function" class="header-anchor">#</a> animation-timing-function</h2> <p>属性</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>定义CSS动画在每一动画周期中执行的节奏。
可能值为一或多个 &lt;timing-function&gt;。

对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，
即从关键帧开始开始，到关键帧结束结束。

定义于一个关键帧区块的缓动函数(animation timing function)应用到改关键帧；
另外，若该关键帧没有定义缓动函数，则使用定义于整个动画的缓动函数。
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>示例</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/* Keyword values */</span>
<span class="token property">animation-timing-function</span><span class="token punctuation">:</span> ease<span class="token punctuation">;</span>
<span class="token property">animation-timing-function</span><span class="token punctuation">:</span> ease-in<span class="token punctuation">;</span>
<span class="token property">animation-timing-function</span><span class="token punctuation">:</span> ease-out<span class="token punctuation">;</span>
<span class="token property">animation-timing-function</span><span class="token punctuation">:</span> ease-in-out<span class="token punctuation">;</span>
<span class="token property">animation-timing-function</span><span class="token punctuation">:</span> linear<span class="token punctuation">;</span>
<span class="token property">animation-timing-function</span><span class="token punctuation">:</span> step-start<span class="token punctuation">;</span>
<span class="token property">animation-timing-function</span><span class="token punctuation">:</span> step-end<span class="token punctuation">;</span>

<span class="token comment">/* Function values */</span>
<span class="token property">animation-timing-function</span><span class="token punctuation">:</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>0.1<span class="token punctuation">,</span> 0.7<span class="token punctuation">,</span> 1.0<span class="token punctuation">,</span> 0.1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">animation-timing-function</span><span class="token punctuation">:</span> <span class="token function">steps</span><span class="token punctuation">(</span>4<span class="token punctuation">,</span> end<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">animation-timing-function</span><span class="token punctuation">:</span> <span class="token function">frames</span><span class="token punctuation">(</span>10<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/* Multiple animations */</span>
<span class="token property">animation-timing-function</span><span class="token punctuation">:</span> ease<span class="token punctuation">,</span> step-start<span class="token punctuation">,</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>0.1<span class="token punctuation">,</span> 0.7<span class="token punctuation">,</span> 1.0<span class="token punctuation">,</span> 0.1<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/* Global values */</span>
<span class="token property">animation-timing-function</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span>
<span class="token property">animation-timing-function</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span>
<span class="token property">animation-timing-function</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><table><thead><tr><th>值</th> <th>描述</th></tr></thead> <tbody><tr><td>linear</td> <td>动画从头到尾的速度是相同的</td></tr> <tr><td>ease</td> <td>默认。动画以低速开始，然后加快，在结束前变慢。</td></tr> <tr><td>ease-in</td> <td>动画以低速开始。</td></tr> <tr><td>ease-out</td> <td>动画以低速结束。</td></tr> <tr><td>ease-in-out</td> <td>动画以低速开始和结束.</td></tr> <tr><td>cubic-bezier(n,n,n,n)</td> <td>在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。</td></tr></tbody></table> <h2 id="faq"><a href="#faq" class="header-anchor">#</a> FAQ</h2> <p><a href="https://segmentfault.com/a/1190000004618375" target="_blank" rel="noopener noreferrer">贝塞尔曲线(cubic-bezier)<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a><br>
疑惑点:</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">animation-timing-function</span><span class="token punctuation">:</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>0.1<span class="token punctuation">,</span> 0.7<span class="token punctuation">,</span> 1.0<span class="token punctuation">,</span> 0.1<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><a href="https://idiotwu.me/understanding-css3-timing-function-steps/" target="_blank" rel="noopener noreferrer">CSS3 timing-function: steps() 详解<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">animation-timing-function</span><span class="token punctuation">:</span> <span class="token function">steps</span><span class="token punctuation">(</span>4<span class="token punctuation">,</span> end<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="cylon-眼睛"><a href="#cylon-眼睛" class="header-anchor">#</a> Cylon 眼睛</h2> <p>考虑到所有浏览器特定的前缀，这里是一个Cylon 眼睛动画合并线性渐变和动画，适用于所有主要的浏览器：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>view_port<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>polling_message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    Listening for dispatches
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>cylon_eye<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.polling_message</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span>white<span class="token punctuation">;</span>
  <span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span>2%<span class="token punctuation">;</span>            
<span class="token punctuation">}</span>

<span class="token selector">.view_port</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span>black<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span>25px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.cylon_eye</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span>white<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 20%<span class="token punctuation">;</span>

  <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">-webkit-linear-gradient</span><span class="token punctuation">(</span>left<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span> 0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.9 <span class="token punctuation">)</span> 25%<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span> 0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.1 <span class="token punctuation">)</span> 50%<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span> 0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.9 <span class="token punctuation">)</span> 75%<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span>    <span class="token function">-moz-linear-gradient</span><span class="token punctuation">(</span>left<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span> 0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.9 <span class="token punctuation">)</span> 25%<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span> 0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.1 <span class="token punctuation">)</span> 50%<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span> 0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.9 <span class="token punctuation">)</span> 75%<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span>     <span class="token function">-ms-linear-gradient</span><span class="token punctuation">(</span>left<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span> 0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.9 <span class="token punctuation">)</span> 25%<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span> 0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.1 <span class="token punctuation">)</span> 50%<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span> 0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.9 <span class="token punctuation">)</span> 75%<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span>      <span class="token function">-o-linear-gradient</span><span class="token punctuation">(</span>left<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span> 0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.9 <span class="token punctuation">)</span> 25%<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span> 0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.1 <span class="token punctuation">)</span> 50%<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span> 0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.9 <span class="token punctuation">)</span> 75%<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span>         <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to right<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span> 0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.9 <span class="token punctuation">)</span> 25%<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span> 0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.1 <span class="token punctuation">)</span> 50%<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span> 0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.9 <span class="token punctuation">)</span> 75%<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token property">-webkit-animation</span><span class="token punctuation">:</span> move_eye 4s linear 0s infinite alternate<span class="token punctuation">;</span>
     <span class="token property">-moz-animation</span><span class="token punctuation">:</span> move_eye 4s linear 0s infinite alternate<span class="token punctuation">;</span>
       <span class="token property">-o-animation</span><span class="token punctuation">:</span> move_eye 4s linear 0s infinite alternate<span class="token punctuation">;</span>
          <span class="token property">animation</span><span class="token punctuation">:</span> move_eye 4s linear 0s infinite alternate<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@-webkit-keyframes</span> move_eye</span> <span class="token punctuation">{</span> <span class="token selector">from</span> <span class="token punctuation">{</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>-20%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">to</span> <span class="token punctuation">{</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span> <span class="token punctuation">}</span>  <span class="token punctuation">}</span>
   <span class="token atrule"><span class="token rule">@-moz-keyframes</span> move_eye</span> <span class="token punctuation">{</span> <span class="token selector">from</span> <span class="token punctuation">{</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>-20%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">to</span> <span class="token punctuation">{</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span> <span class="token punctuation">}</span>  <span class="token punctuation">}</span>
     <span class="token atrule"><span class="token rule">@-o-keyframes</span> move_eye</span> <span class="token punctuation">{</span> <span class="token selector">from</span> <span class="token punctuation">{</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>-20%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">to</span> <span class="token punctuation">{</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span> <span class="token punctuation">}</span>  <span class="token punctuation">}</span>
        <span class="token atrule"><span class="token rule">@keyframes</span> move_eye</span> <span class="token punctuation">{</span> <span class="token selector">from</span> <span class="token punctuation">{</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>-20%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">to</span> <span class="token punctuation">{</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span> <span class="token punctuation">}</span>  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">10/30/2018, 1:06:23 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/CSS/2018_10_21_03.html" class="prev">box-flex使用说明</a></span> <span class="next"><a href="/CSS/2018_10_21_05.html">加速网站的最佳实践</a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.9558671e.js" defer></script><script src="/assets/js/3.515b53d6.js" defer></script><script src="/assets/js/67.8184d78b.js" defer></script>
  </body>
</html>