Css3--transitions and animations
Last Update:2016-05-29
Source: Internet
Author: User
<span id="Label3"></p><p><p>1. Note the use of prefixes</p></p><p><p>2. properties:</p></p><p><p>Transition-property:none/all/property</p></p><p><p></p></p><p><p>3. duration:</p></p><p><p>Transition-duration: The default value is 0, even if it is negative, it is handled according to 0</p></p><p><p></p></p><p><p>4. Transition-timing-function:ease (default Value)/linear/ease-in/ease-out/ease-in-out</p></p><p><p></p></p><p><p>5. delay:</p></p><p><p>Transition-delay: The default value is 0</p></p><p><p></p></p><p><p>6, abbreviated:</p></p><pre><pre><span style="color: #008080;">1</span> <span style="color: #800000;">E</span> {<span style="color: #008080;">2</span><span style="color: #ff0000;"> transition:transition-property transition-duration transition-timing-function transition-delay;</span> <span style="color: #008080;">3</span> }</pre></pre><p><p></p></p><p><p>7. Multiple Transitions</p></p><pre><pre><span style="color: #800000;">E</span> {<span style="color: #ff0000;"> transition-property:border, height, width; transition-duration:4s, 500ms;</span>}<span style="color: #800000;">width matches The first value of a transition-duration</span></pre></pre><p><p></p></p><p><p>8. Animation Module</p></p><pre><pre><span style="color: #008080;">1</span> <span style="color: #800000;">@keyframes ' expend '</span> {<span style="color: #008080;">2</span><span style="color: #ff0000;"> from{</span>}<span style="color: #008080;">3</span><span style="color: #800000;"> 50%</span>{}<span style="color: #008080;">4</span><span style="color: #800000;"> </span>to {}<span style="color: #008080;">5</span> <span style="color: #800000;">}</span></pre></pre><pre><span style="color: #008080;"><span style="color: #008080;">1</span></span> <span style="color: #800000;"><span style="color: #800000;">Div</span></span>{<span style="color: #008080;"><span style="color: #008080;">2</span></span> <span style="color: #ff0000;"><span style="color: #ff0000;">Animation-name</span></span>: Expend<span style="line-height: 1.5;"><span style="line-height: 1.5;">;<br></span></span><span style="color: #008080;"><span style="color: #008080;">3</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">animation-duration</span></span><span style="line-height: 1.5;"><span style="line-height: 1.5;">:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">6s</span></span><span style="line-height: 1.5;"><span style="line-height: 1.5;">;<br></span></span><span style="color: #008080;"><span style="color: #008080;">4</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">animation-timing-function</span></span><span style="line-height: 1.5;"><span style="line-height: 1.5;">:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">ease-in</span></span><span style="line-height: 1.5;"><span style="line-height: 1.5;">;<br></span></span><span style="color: #008080;"><span style="color: #008080;">5</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Animation-delay</span></span><span style="line-height: 1.5;"><span style="line-height: 1.5;">:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">2s</span></span><span style="line-height: 1.5;"><span style="line-height: 1.5;">;<br></span></span><span style="color: #008080;"><span style="color: #008080;">6</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Animation-iteration-count</span></span><span style="line-height: 1.5;"><span style="line-height: 1.5;">:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">Ten</span></span><span style="line-height: 1.5;"><span style="line-height: 1.5;">;<br></span></span><span style="color: #008080;"><span style="color: #008080;">7</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">animation-direction</span></span><span style="line-height: 1.5;"><span style="line-height: 1.5;">:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">Alternate--reverse Loop</span></span><span style="line-height: 1.5;"><span style="line-height: 1.5;">;</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">---normal--normal Circulation</span></span><span style="color: #008080;"><span style="color: #008080;">8</span></span><span style="line-height: 1.5;"><span style="line-height: 1.5;"><br>}</span></span></pre><p><p>animation-play-state:running, paused----playback Status</p></p><p><p>Css3--transitions and animations</p></p></span>
