|
@@ -652,6 +652,222 @@
|
|
|
|
|
|
<div class="gb-markdown book-page-inner">
|
|
|
<h1 id="css动画">css动画</h1>
|
|
|
+<h3 id="animation">animation</h3>
|
|
|
+<p>CSS animation属性是如下属性的一个简写属性形式: <br>
|
|
|
+animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction 和 animation-fill-mode.</p>
|
|
|
+<pre><code class="lang-css"><span class="hljs-comment">/* @keyframes duration | timing-function | delay |
|
|
|
+ iteration-count | direction | fill-mode | play-state | name */</span>
|
|
|
+ <span class="hljs-selector-tag">animation</span>: 3<span class="hljs-selector-tag">s</span> <span class="hljs-selector-tag">ease-in</span> 1<span class="hljs-selector-tag">s</span> 2 <span class="hljs-selector-tag">reverse</span> <span class="hljs-selector-tag">both</span> <span class="hljs-selector-tag">paused</span> <span class="hljs-selector-tag">slidein</span>;
|
|
|
+
|
|
|
+<span class="hljs-comment">/* @keyframes duration | timing-function | delay | name */</span>
|
|
|
+ <span class="hljs-selector-tag">animation</span>: 3<span class="hljs-selector-tag">s</span> <span class="hljs-selector-tag">linear</span> 1<span class="hljs-selector-tag">s</span> <span class="hljs-selector-tag">slidein</span>;
|
|
|
+
|
|
|
+<span class="hljs-comment">/* @keyframes duration | name */</span>
|
|
|
+ <span class="hljs-selector-tag">animation</span>: 3<span class="hljs-selector-tag">s</span> <span class="hljs-selector-tag">slidein</span>;
|
|
|
+</code></pre>
|
|
|
+<h3 id="animation-delay">animation-delay</h3>
|
|
|
+<p>定义:</p>
|
|
|
+<pre><code>CSS属性定义动画于何时开始,即从动画应用在元素上到动画开始的这段时间的长度。
|
|
|
+</code></pre><p>语法:</p>
|
|
|
+<pre><code class="lang-css"><span class="hljs-selector-tag">animation-delay</span>: 3<span class="hljs-selector-tag">s</span>;
|
|
|
+<span class="hljs-selector-tag">animation-delay</span>: 2<span class="hljs-selector-tag">s</span>, 4<span class="hljs-selector-tag">ms</span>;
|
|
|
+</code></pre>
|
|
|
+<h3 id="animation-direction">animation-direction</h3>
|
|
|
+<p>定义:</p>
|
|
|
+<pre><code>CSS 属性指示动画是否反向播放,它通常在简写属性animation中设定
|
|
|
+</code></pre><p>语法:</p>
|
|
|
+<pre><code class="lang-css"><span class="hljs-selector-tag">animation-direction</span>: <span class="hljs-selector-tag">normal</span>
|
|
|
+<span class="hljs-selector-tag">animation-direction</span>: <span class="hljs-selector-tag">reverse</span>
|
|
|
+<span class="hljs-selector-tag">animation-direction</span>: <span class="hljs-selector-tag">alternate</span>
|
|
|
+<span class="hljs-selector-tag">animation-direction</span>: <span class="hljs-selector-tag">alternate-reverse</span>
|
|
|
+<span class="hljs-selector-tag">animation-direction</span>: <span class="hljs-selector-tag">normal</span>, <span class="hljs-selector-tag">reverse</span>
|
|
|
+<span class="hljs-selector-tag">animation-direction</span>: <span class="hljs-selector-tag">alternate</span>, <span class="hljs-selector-tag">reverse</span>, <span class="hljs-selector-tag">normal</span>
|
|
|
+</code></pre>
|
|
|
+<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>
|
|
|
+<h3 id="animation-duration">animation-duration</h3>
|
|
|
+<p>定义:</p>
|
|
|
+<pre><code>属性指定一个动画周期的时长。
|
|
|
+</code></pre><p>语法:</p>
|
|
|
+<pre><code class="lang-css"><span class="hljs-selector-tag">animation-duration</span>: 6<span class="hljs-selector-tag">s</span>
|
|
|
+<span class="hljs-selector-tag">animation-duration</span>: 120<span class="hljs-selector-tag">ms</span>
|
|
|
+<span class="hljs-selector-tag">animation-duration</span>: 1<span class="hljs-selector-tag">s</span>, 15<span class="hljs-selector-tag">s</span>
|
|
|
+<span class="hljs-selector-tag">animation-duration</span>: 10<span class="hljs-selector-tag">s</span>, 30<span class="hljs-selector-tag">s</span>, 230<span class="hljs-selector-tag">ms</span>
|
|
|
+</code></pre>
|
|
|
+<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>
|
|
|
+<h3 id="animation-fill-mode">animation-fill-mode</h3>
|
|
|
+<p>定义:</p>
|
|
|
+<pre><code>这个 CSS 属性用来指定在动画执行之前和之后如何给动画的目标应用样式。
|
|
|
+</code></pre><p>语法</p>
|
|
|
+<pre><code class="lang-css"><span class="hljs-comment">/* <single-animation-fill-mode> = none | forwards | backwards | both */</span>
|
|
|
+<span class="hljs-selector-tag">animation-fill-mode</span>: <span class="hljs-selector-tag">none</span>
|
|
|
+<span class="hljs-selector-tag">animation-fill-mode</span>: <span class="hljs-selector-tag">forwards</span>
|
|
|
+<span class="hljs-selector-tag">animation-fill-mode</span>: <span class="hljs-selector-tag">backwards</span>
|
|
|
+<span class="hljs-selector-tag">animation-fill-mode</span>: <span class="hljs-selector-tag">both</span>
|
|
|
+<span class="hljs-comment">/* 可以应用多个参数,这个时候使用逗号隔开 */</span>
|
|
|
+<span class="hljs-comment">/* 各个参数应用于与次序相对应的动画名 */</span>
|
|
|
+<span class="hljs-selector-tag">animation-fill-mode</span>: <span class="hljs-selector-tag">none</span>, <span class="hljs-selector-tag">backwards</span>
|
|
|
+<span class="hljs-selector-tag">animation-fill-mode</span>: <span class="hljs-selector-tag">both</span>, <span class="hljs-selector-tag">forwards</span>, <span class="hljs-selector-tag">none</span>
|
|
|
+</code></pre>
|
|
|
+<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
|
|
|
+animation-name
|
|
|
+animation-play-state
|
|
|
+animation-timing-function</p>
|
|
|
+<h2 id="cylon-眼睛">Cylon 眼睛</h2>
|
|
|
+<p>考虑到所有浏览器特定的前缀,这里是一个Cylon 眼睛动画合并线性渐变和动画,适用于所有主要的浏览器:</p>
|
|
|
+<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"view_port"</span>></span>
|
|
|
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"polling_message"</span>></span>
|
|
|
+ Listening for dispatches
|
|
|
+ <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
|
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"cylon_eye"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
|
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
|
+</code></pre>
|
|
|
+<pre><code class="lang-css"><span class="hljs-selector-class">.polling_message</span> {
|
|
|
+ <span class="hljs-attribute">color</span>:white;
|
|
|
+ <span class="hljs-attribute">float</span>:left;
|
|
|
+ <span class="hljs-attribute">margin-right</span>:<span class="hljs-number">2%</span>;
|
|
|
+}
|
|
|
+
|
|
|
+<span class="hljs-selector-class">.view_port</span> {
|
|
|
+ <span class="hljs-attribute">background-color</span>:black;
|
|
|
+ <span class="hljs-attribute">height</span>:<span class="hljs-number">25px</span>;
|
|
|
+ <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
|
|
|
+ <span class="hljs-attribute">overflow</span>: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+<span class="hljs-selector-class">.cylon_eye</span> {
|
|
|
+ <span class="hljs-attribute">color</span>:white;
|
|
|
+ <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
|
|
|
+ <span class="hljs-attribute">width</span>: <span class="hljs-number">20%</span>;
|
|
|
+
|
|
|
+ <span class="hljs-attribute">background-color</span>: red;
|
|
|
+ <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">-webkit-linear-gradient</span>(left, rgba( 0,0,0,0.9 ) <span class="hljs-number">25%</span>, <span class="hljs-built_in">rgba</span>( 0,0,0,0.1 ) <span class="hljs-number">50%</span>, <span class="hljs-built_in">rgba</span>( 0,0,0,0.9 ) <span class="hljs-number">75%</span>);
|
|
|
+ <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">-moz-linear-gradient</span>(left, rgba( 0,0,0,0.9 ) <span class="hljs-number">25%</span>, <span class="hljs-built_in">rgba</span>( 0,0,0,0.1 ) <span class="hljs-number">50%</span>, <span class="hljs-built_in">rgba</span>( 0,0,0,0.9 ) <span class="hljs-number">75%</span>);
|
|
|
+ <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">-ms-linear-gradient</span>(left, rgba( 0,0,0,0.9 ) <span class="hljs-number">25%</span>, <span class="hljs-built_in">rgba</span>( 0,0,0,0.1 ) <span class="hljs-number">50%</span>, <span class="hljs-built_in">rgba</span>( 0,0,0,0.9 ) <span class="hljs-number">75%</span>);
|
|
|
+ <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">-o-linear-gradient</span>(left, rgba( 0,0,0,0.9 ) <span class="hljs-number">25%</span>, <span class="hljs-built_in">rgba</span>( 0,0,0,0.1 ) <span class="hljs-number">50%</span>, <span class="hljs-built_in">rgba</span>( 0,0,0,0.9 ) <span class="hljs-number">75%</span>);
|
|
|
+ <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">linear-gradient</span>(to right, rgba( 0,0,0,0.9 ) <span class="hljs-number">25%</span>, <span class="hljs-built_in">rgba</span>( 0,0,0,0.1 ) <span class="hljs-number">50%</span>, <span class="hljs-built_in">rgba</span>( 0,0,0,0.9 ) <span class="hljs-number">75%</span>);
|
|
|
+
|
|
|
+ <span class="hljs-attribute">-webkit-animation</span>: move_eye <span class="hljs-number">4s</span> linear <span class="hljs-number">0s</span> infinite alternate;
|
|
|
+ <span class="hljs-attribute">-moz-animation</span>: move_eye <span class="hljs-number">4s</span> linear <span class="hljs-number">0s</span> infinite alternate;
|
|
|
+ <span class="hljs-attribute">-o-animation</span>: move_eye <span class="hljs-number">4s</span> linear <span class="hljs-number">0s</span> infinite alternate;
|
|
|
+ <span class="hljs-attribute">animation</span>: move_eye <span class="hljs-number">4s</span> linear <span class="hljs-number">0s</span> infinite alternate;
|
|
|
+}
|
|
|
+
|
|
|
+@<span class="hljs-keyword">-webkit-keyframes</span> move_eye { <span class="hljs-selector-tag">from</span> { <span class="hljs-attribute">margin-left</span>:-<span class="hljs-number">20%</span>; } <span class="hljs-selector-tag">to</span> { <span class="hljs-attribute">margin-left</span>:<span class="hljs-number">100%</span>; } }
|
|
|
+ @<span class="hljs-keyword">-moz-keyframes</span> move_eye { <span class="hljs-selector-tag">from</span> { <span class="hljs-attribute">margin-left</span>:-<span class="hljs-number">20%</span>; } <span class="hljs-selector-tag">to</span> { <span class="hljs-attribute">margin-left</span>:<span class="hljs-number">100%</span>; } }
|
|
|
+ @<span class="hljs-keyword">-o-keyframes</span> move_eye { <span class="hljs-selector-tag">from</span> { <span class="hljs-attribute">margin-left</span>:-<span class="hljs-number">20%</span>; } <span class="hljs-selector-tag">to</span> { <span class="hljs-attribute">margin-left</span>:<span class="hljs-number">100%</span>; } }
|
|
|
+ @<span class="hljs-keyword">keyframes</span> move_eye { <span class="hljs-selector-tag">from</span> { <span class="hljs-attribute">margin-left</span>:-<span class="hljs-number">20%</span>; } <span class="hljs-selector-tag">to</span> { <span class="hljs-attribute">margin-left</span>:<span class="hljs-number">100%</span>; } }
|
|
|
+</code></pre>
|
|
|
|
|
|
</div>
|
|
|
|
|
@@ -698,7 +914,7 @@
|
|
|
<a href="#">Return to the top</a>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <a href="#">Updated May 30th 18</a>
|
|
|
+ <a href="#">Updated May 31st 18</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
@@ -725,7 +941,7 @@
|
|
|
|
|
|
<script>
|
|
|
(function() {
|
|
|
- gitbook.page.hasChanged({"page":{"title":"css动画","level":"4.2.4","depth":2,"next":{"title":"components","level":"5.1","depth":1,"path":"vue/components/README.md","ref":"vue/components/README.md","articles":[{"title":"组件传值_props","level":"5.1.1","depth":2,"path":"vue/components/props.md","ref":"vue/components/props.md","articles":[]}]},"previous":{"title":"flex布局","level":"4.2.3","depth":2,"path":"css/cases/02_.md","ref":"css/cases/02_.md","articles":[]},"dir":"ltr"},"config":{"plugins":["theme-official@2.1.1","-sharing","-fontsettings","sitemap","-search","search-pro"],"root":"./docs/","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"sitemap":{"hostname":"https://blog.honghaitao.net/"},"search-pro":{"cutWordLib":"nodejieba","defineWord":["小需求","基础建设"]},"highlight":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"theme-official":{},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{"version":"0.0.1"},"title":"代码收集","gitbook":"3.1.1"},"file":{"path":"css/cases/03_.md","mtime":"2018-05-30T09:02:13.115Z","type":"markdown"},"gitbook":{"version":"3.1.1","time":"2018-05-31T05:38:08.837Z"},"basePath":"../..","book":{"language":""}});
|
|
|
+ gitbook.page.hasChanged({"page":{"title":"css动画","level":"4.2.4","depth":2,"next":{"title":"components","level":"5.1","depth":1,"path":"vue/components/README.md","ref":"vue/components/README.md","articles":[{"title":"组件传值_props","level":"5.1.1","depth":2,"path":"vue/components/props.md","ref":"vue/components/props.md","articles":[]}]},"previous":{"title":"flex布局","level":"4.2.3","depth":2,"path":"css/cases/02_.md","ref":"css/cases/02_.md","articles":[]},"dir":"ltr"},"config":{"plugins":["theme-official@2.1.1","-sharing","-fontsettings","sitemap","-search","search-pro"],"root":"./docs/","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"sitemap":{"hostname":"https://blog.honghaitao.net/"},"search-pro":{"cutWordLib":"nodejieba","defineWord":["小需求","基础建设"]},"highlight":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"theme-official":{},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{"version":"0.0.1"},"title":"代码收集","gitbook":"3.1.1"},"file":{"path":"css/cases/03_.md","mtime":"2018-05-31T06:22:52.541Z","type":"markdown"},"gitbook":{"version":"3.1.1","time":"2018-05-31T06:23:00.958Z"},"basePath":"../..","book":{"language":""}});
|
|
|
})();
|
|
|
</script>
|
|
|
|