CSS animation 動畫屬性

屬性	說明
animation-name	動畫名稱
animation-duration	動畫持續時間，預設 0，單位 s 或 ms。
animation-delay	動畫延遲播放時間，預設 0，單位 s 或 ms。
animation-iteration-count	動畫播放次數，預設 1。 其他還有 infinite。
animation-timing-function	動畫加速度函式，預設 ease。 其他還有： linear、ease-in、ease-out、ease-in-out step-start、step-end、steps(int,start/end)、cubic-bezier(n,n,n,n)。
animation-direction	動畫播放方向，預設 normal。 其他還有 reverse、alternate、alternate-reverse。
animation-fill-mode	動畫播放前後模式，預設 none。 其他還有 forwards、backwards、both。
animation-play-state	動畫播放或暫停狀態，預設 running。 其他還有 paused。

animation: name duration | timing-function | delay | iteration-count |
direction | fill-mode | play-state;

<div class="class" style="color: gold; font-size: x-large;">閃爍字體 </div><pre>.class{ -webkit-animation: c15717752 1s infinite linear; <br /> -moz-animation: c15717752 1s infinite linear; <br /> -o-animation: c15717752 1s infinite linear;<br /> -ms-animation: c15717752 1s infinite linear; } <br /> /* safari chrome 關鍵影格的設定 */ <br />@-webkit-keyframes c15717752{ 60% {color:crimson;} <br /> 80% {color:yellow;} <br /> 81% {color:orange red;} <br /> 100% color:brown;} }<br />/* firefox Mozilla 關鍵影格的設定 */ <br /> @-moz-keyframes c15717752{ 60% {color:crimson;}<br /> 80% {color:yellow;}<br /> 81% {color:orange red;}<br /> 100% {color:brown;} }<br />/* opera 關鍵影格的設定 */ <br />@-o-keyframes c15717752{ 60% {color:crimson;}<br /> 80% {color:yellow;}<br /> 81% {color:orange red;}<br /> 100% {color:brown;} }<br />/* IE microsoft 關鍵影格的設定 */<br />@-ms-keyframes c15717752{60% {color:crimson;}<br /> 80% {color:yellow;}<br /> 81% {color:orange red;}<br /> 100% {color:brown;} } </pre> <style>.class{ -webkit-animation: c15717752 1s infinite linear; -moz-animation: c15717752 1s infinite linear; -o-animation: c15717752 1s infinite linear; -ms-animation: c15717752 1s infinite linear; } /* safari chrome 關鍵影格的設定 */ @-webkit-keyframes c15717752{ 60% {color:crimson;} 80% {color:yellow;} 81% {color:orange red;} 100% color:brown;} } /* firefox Mozilla 關鍵影格的設定 */ @-moz-keyframes c15717752{ 60% {color:crimson;} 80% {color:yellow;} 81% {color:orange red;} 100% {color:brown;} } /* opera 關鍵影格的設定 */ @-o-keyframes c15717752{ 60% {color:crimson;} 80% {color:yellow;} 81% {color:orange red;} 100% {color:brown;} } /* IE microsoft 關鍵影格的設定 */ @-ms-keyframes c15717752{60% {color:crimson;} 80% {color:yellow;} 81% {color:orange red;} 100% {color:brown;} } </style>

00

<div class="bomb">按我</div><pre>.bomb{ width:100px;<br /> text-align: center;<br /> background-color:#CCCCCC;<br /> border: 5px outset darkgray;<br /> border-radius: 15px; <br /> cursor:pointer}<br />.bomb:active { border: 5px inset darkgray; }<br />.bomb:after { content: ">";<br /> animation: Rafter 1s linear infinite ;}<br />.bomb:before { content: "<";<br /> animation: Lbefore 1s linear infinite ;}<br />@-webkit-keyframes Rafter{ 10% { content: ">>"; }<br /> 50% { content: ">>>"; }<br /> 90% { content: ">>"; } }<br />@keyframes Rafter{ 10% { content: ">>"; }<br /> 50% { content: ">>>"; }<br /> 90% { content: ">>"; } }<br />@-webkit-keyframes Lbefore{ 10% { content: "<<"; }<br /> 50% { content: "<<<"; }<br /> 90% { content: "<<"; } }<br />@keyframes Lbefore { 10% { content: "<<"; }<br /> 50% { content: "<<<"; }<br /> 90% { content: "<<"; } } </pre> <style>.bomb{ width:100px; text-align: center; background-color:#CCCCCC; border: 5px outset darkgray; border-radius: 15px; cursor:pointer} .bomb:active{ border: 5px inset darkgray; } .bomb:after { content: ">"; animation: Rafter 1s linear infinite ;} .bomb:before { content: "<"; animation: Lbefore 1s linear infinite ;} @-webkit-keyframes Rafter{ 10% { content: ">>"; } 50% { content: ">>>"; } 90% { content: ">>"; } } @keyframes Rafter{ 10% { content: ">>"; } 50% { content: ">>>"; } 90% { content: ">>"; } } @-webkit-keyframes Lbefore{ 10% { content: "<<"; } 50% { content: "<<<"; } 90% { content: "<<"; } } @keyframes Lbefore { 10% { content: "<<"; } 50% { content: "<<<"; } 90% { content: "<<"; } } </style>

00

<style> #D1{ width: 100px; height: 100px; background-color: red; position: relative; animation : MO1 4s infinite ; } @keyframes MO1{ 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:87%; top:0px;} 50% {background-color:blue; left:87%; top:75%;} 75% {background-color:green; left:0px; top:75%;} 100% {background-color:red; left:0px; top:0px;} } #D2{ width: 100px; height: 100px; background-color: red; position: relative; animation : MO2 4s infinite ; } @keyframes MO2{ 0% {background-color:yellow; left:87%; top:-100px;} 25% {background-color:blue; left:0px; top:50%;} 50% {background-color:red; left:0%; top:-100px;} 75% {background-color:gold; left:87%; top:50%;} 100% {background-color:olive; left:87%; top:-100px;} } </style> <div id="D1" style="font-size:30px;">id=D1</div><div id="D2" style="font-size:30px;">id=D2</div><pre style="color:#a52a2a;margin-top:-200px"><br />#D1{<br /> width: 100px;<br /> height: 100px;<br /> background-color: red;<br /> position: relative;<br /> animation : MO1 4s infinite ;<br />}<br /><br />@keyframes MO1{<br /> 0% {background-color:red; left:0px; top:0px;}<br /> 25% {background-color:yellow; left:87%; top:0px;}<br /> 50% {background-color:blue; left:87%; top:75%;}<br /> 75% {background-color:green; left:0px; top:75%;}<br /> 100% {background-color:red; left:0px; top:0px;} }<br /><br />#D2{<br /> width: 100px;<br /> height: 100px;<br /> background-color: red;<br /> position: relative;<br /> animation : MO2 4s infinite ; }<br /><br />@keyframes MO2{<br /> 0% {background-color:yellow; left:87%; top:-100px;}<br /> 25% {background-color:blue; left:0px; top:50%;}<br /> 50% {background-color:red; left:0%; top:-100px;}<br /> 75% {background-color:gold; left:87%; top:50%;}<br /> 100% {background-color:olive; left:87%; top:-100px;} }</pre>

00

#html CSS animation 動畫屬性#html CSS keyframes#html CSS animation 閃爍字體#html CSS 閃爍字體