|
|
@@ -820,9 +820,113 @@ forwards<br>
|
|
|
动画将会执行 forwards 和 backwards 执行的动作。</p>
|
|
|
</blockquote>
|
|
|
<p>animation-iteration-count
|
|
|
-animation-name
|
|
|
-animation-play-state
|
|
|
-animation-timing-function</p>
|
|
|
+定义:</p>
|
|
|
+<pre><code>CSS 属性 定义动画在结束前运行的次数 可以是1次 无限循环.
|
|
|
+默认属性 animation 默认播放动画循环一次.
|
|
|
+</code></pre><p>语法:</p>
|
|
|
+<pre><code class="lang-css"><span class="hljs-comment">/* 使用规范 <single-animation-iteration-count> = infinite | <number> */</span>
|
|
|
+<span class="hljs-selector-tag">animation-iteration-count</span>: <span class="hljs-selector-tag">infinite</span>;
|
|
|
+<span class="hljs-selector-tag">animation-iteration-count</span>: 3;
|
|
|
+<span class="hljs-selector-tag">animation-iteration-count</span>: 2<span class="hljs-selector-class">.3</span>;
|
|
|
+<span class="hljs-selector-tag">animation-iteration-count</span>: 2, 0, <span class="hljs-selector-tag">infinite</span>;
|
|
|
+</code></pre>
|
|
|
+<h3 id="animation-name">animation-name</h3>
|
|
|
+<p>定义</p>
|
|
|
+<pre><code>属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。
|
|
|
+</code></pre><pre><code class="lang-css"><span class="hljs-comment">/* Single animation */</span>
|
|
|
+<span class="hljs-selector-tag">animation-name</span>: <span class="hljs-selector-tag">none</span>;
|
|
|
+<span class="hljs-selector-tag">animation-name</span>: <span class="hljs-selector-tag">test_05</span>;
|
|
|
+<span class="hljs-selector-tag">animation-name</span>: <span class="hljs-selector-tag">-specific</span>;
|
|
|
+<span class="hljs-selector-tag">animation-name</span>: <span class="hljs-selector-tag">sliding-vertically</span>;
|
|
|
+
|
|
|
+<span class="hljs-comment">/* Multiple animations */</span>
|
|
|
+<span class="hljs-selector-tag">animation-name</span>: <span class="hljs-selector-tag">test1</span>, <span class="hljs-selector-tag">animation4</span>;
|
|
|
+<span class="hljs-selector-tag">animation-name</span>: <span class="hljs-selector-tag">none</span>, <span class="hljs-selector-tag">-moz-specific</span>, <span class="hljs-selector-tag">sliding</span>;
|
|
|
+
|
|
|
+<span class="hljs-comment">/* Global values */</span>
|
|
|
+<span class="hljs-selector-tag">animation-name</span>: <span class="hljs-selector-tag">initial</span>
|
|
|
+<span class="hljs-selector-tag">animation-name</span>: <span class="hljs-selector-tag">inherit</span>
|
|
|
+<span class="hljs-selector-tag">animation-name</span>: <span class="hljs-selector-tag">unset</span>
|
|
|
+</code></pre>
|
|
|
+<h3 id="animation-play-state">animation-play-state</h3>
|
|
|
+<p>定义:</p>
|
|
|
+<pre><code>CSS 属性定义一个动画是否运行或者暂停。
|
|
|
+可以通过查询它来确定动画是否正在运行。
|
|
|
+另外，它的值可以被设置为暂停和恢复的动画的重放。
|
|
|
+恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。
|
|
|
+</code></pre><p>语法</p>
|
|
|
+<pre><code class="lang-css"><span class="hljs-comment">/* 正式语法 => <single-animation-play-state> = running | paused */</span>
|
|
|
+<span class="hljs-comment">/* Single animation=>单一动画 */</span>
|
|
|
+<span class="hljs-selector-tag">animation-play-state</span>: <span class="hljs-selector-tag">running</span>;
|
|
|
+<span class="hljs-selector-tag">animation-play-state</span>: <span class="hljs-selector-tag">paused</span>;
|
|
|
+
|
|
|
+<span class="hljs-comment">/* Multiple animations=>多个动画 */</span>
|
|
|
+<span class="hljs-selector-tag">animation-play-state</span>: <span class="hljs-selector-tag">paused</span>, <span class="hljs-selector-tag">running</span>, <span class="hljs-selector-tag">running</span>;
|
|
|
+
|
|
|
+<span class="hljs-comment">/* Global values=>全球价值 */</span>
|
|
|
+<span class="hljs-selector-tag">animation-play-state</span>: <span class="hljs-selector-tag">inherited</span>;
|
|
|
+<span class="hljs-selector-tag">animation-play-state</span>: <span class="hljs-selector-tag">initial</span>;
|
|
|
+<span class="hljs-selector-tag">animation-play-state</span>: <span class="hljs-selector-tag">unset</span>;
|
|
|
+</code></pre>
|
|
|
+<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>
|
|
|
+<h3 id="animation-timing-function">animation-timing-function</h3>
|
|
|
+<p>属性</p>
|
|
|
+<pre><code>定义CSS动画在每一动画周期中执行的节奏。
|
|
|
+可能值为一或多个 <timing-function>。
|
|
|
+
|
|
|
+对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，
|
|
|
+即从关键帧开始开始，到关键帧结束结束。
|
|
|
+
|
|
|
+定义于一个关键帧区块的缓动函数(animation timing function)应用到改关键帧；
|
|
|
+另外，若该关键帧没有定义缓动函数，则使用定义于整个动画的缓动函数。
|
|
|
+</code></pre><p>示例</p>
|
|
|
+<pre><code class="lang-css"><span class="hljs-comment">/* Keyword values */</span>
|
|
|
+<span class="hljs-selector-tag">animation-timing-function</span>: <span class="hljs-selector-tag">ease</span>;
|
|
|
+<span class="hljs-selector-tag">animation-timing-function</span>: <span class="hljs-selector-tag">ease-in</span>;
|
|
|
+<span class="hljs-selector-tag">animation-timing-function</span>: <span class="hljs-selector-tag">ease-out</span>;
|
|
|
+<span class="hljs-selector-tag">animation-timing-function</span>: <span class="hljs-selector-tag">ease-in-out</span>;
|
|
|
+<span class="hljs-selector-tag">animation-timing-function</span>: <span class="hljs-selector-tag">linear</span>;
|
|
|
+<span class="hljs-selector-tag">animation-timing-function</span>: <span class="hljs-selector-tag">step-start</span>;
|
|
|
+<span class="hljs-selector-tag">animation-timing-function</span>: <span class="hljs-selector-tag">step-end</span>;
|
|
|
+
|
|
|
+<span class="hljs-comment">/* Function values */</span>
|
|
|
+<span class="hljs-selector-tag">animation-timing-function</span>: <span class="hljs-selector-tag">cubic-bezier</span>(0<span class="hljs-selector-class">.1</span>, 0<span class="hljs-selector-class">.7</span>, 1<span class="hljs-selector-class">.0</span>, 0<span class="hljs-selector-class">.1</span>);
|
|
|
+<span class="hljs-selector-tag">animation-timing-function</span>: <span class="hljs-selector-tag">steps</span>(4, <span class="hljs-selector-tag">end</span>);
|
|
|
+<span class="hljs-selector-tag">animation-timing-function</span>: <span class="hljs-selector-tag">frames</span>(10);
|
|
|
+
|
|
|
+<span class="hljs-comment">/* Multiple animations */</span>
|
|
|
+<span class="hljs-selector-tag">animation-timing-function</span>: <span class="hljs-selector-tag">ease</span>, <span class="hljs-selector-tag">step-start</span>, <span class="hljs-selector-tag">cubic-bezier</span>(0<span class="hljs-selector-class">.1</span>, 0<span class="hljs-selector-class">.7</span>, 1<span class="hljs-selector-class">.0</span>, 0<span class="hljs-selector-class">.1</span>);
|
|
|
+
|
|
|
+<span class="hljs-comment">/* Global values */</span>
|
|
|
+<span class="hljs-selector-tag">animation-timing-function</span>: <span class="hljs-selector-tag">inherit</span>;
|
|
|
+<span class="hljs-selector-tag">animation-timing-function</span>: <span class="hljs-selector-tag">initial</span>;
|
|
|
+<span class="hljs-selector-tag">animation-timing-function</span>: <span class="hljs-selector-tag">unset</span>;
|
|
|
+</code></pre>
|
|
|
+<h2 id="faq">FAQ</h2>
|
|
|
+<p><a href="https://segmentfault.com/a/1190000004618375" target="_blank">贝塞尔曲线(cubic-bezier)</a><br>
|
|
|
+疑惑点:</p>
|
|
|
+<pre><code class="lang-css"><span class="hljs-selector-tag">animation-timing-function</span>: <span class="hljs-selector-tag">cubic-bezier</span>(0<span class="hljs-selector-class">.1</span>, 0<span class="hljs-selector-class">.7</span>, 1<span class="hljs-selector-class">.0</span>, 0<span class="hljs-selector-class">.1</span>);
|
|
|
+</code></pre>
|
|
|
+<p><a href="https://idiotwu.me/understanding-css3-timing-function-steps/" target="_blank">CSS3 timing-function: steps() 详解</a></p>
|
|
|
+<pre><code class="lang-css"><span class="hljs-selector-tag">animation-timing-function</span>: <span class="hljs-selector-tag">steps</span>(4, <span class="hljs-selector-tag">end</span>);
|
|
|
+</code></pre>
|
|
|
<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>
|
|
|
@@ -941,7 +1045,7 @@ animation-timing-function</p>
|
|
|
|
|
|
<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-31T06:22:52.541Z","type":"markdown"},"gitbook":{"version":"3.1.1","time":"2018-05-31T06:23:00.958Z"},"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-31T08:21:16.653Z","type":"markdown"},"gitbook":{"version":"3.1.1","time":"2018-05-31T08:27:54.027Z"},"basePath":"../..","book":{"language":""}});
|
|
|
})();
|
|
|
</script>
|
|
|
|
