✍ 📁 🙈 🙉 🙊 : CSS animation 動畫屬性

CSS animation 動畫屬性

<div style="font-size:22px;">
<pre>
CSS3 animation 動畫屬性是 CSS 用來設計網頁動畫的標準屬性，
     用來控制動畫的移動方式、顏色變化、移動方向、顏色變化 ... 等效果。
    
animation:name duration function delay count direction mode state
@keyframes 動畫名稱{  10%{..動作..}
                     50%{..動作..} 
                    100%{..動作..} }
</pre>

<table border="1" style="font-size:22px;">
<thead>
<tr>
<th>屬性</th>
<th>說明</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>animation-name</strong></td>
<td>動畫名稱</td>
</tr>
<tr>
<td><strong>animation-duration</strong></td>
<td>動畫持續時間，<em>預設 0</em>，單位 s 或 ms。</td>
</tr>
<tr>
<td><strong>animation-delay</strong></td>
<td>動畫延遲播放時間，<em>預設 0</em>，單位 s 或 ms。</td>
</tr>
<tr>
<td><strong>animation-iteration-count</strong></td>
<td>動畫播放次數，<em>預設 1</em>。<br>其他還有 infinite。</td>
</tr>
<tr>
<td><strong>animation-timing-function</strong></td>
<td>動畫加速度函式，<em>預設 ease</em>。<br>其他還有： linear、ease-in、ease-out、ease-in-out<br>step-start、step-end、steps(int,start/end)、cubic-bezier(n,n,n,n)。</td>
</tr>
<tr>
<td><strong>animation-direction</strong></td>
<td>動畫播放方向，<em>預設 normal</em>。<br>其他還有 reverse、alternate、alternate-reverse。</td>
</tr>
<tr>
<td><strong>animation-fill-mode</strong></td>
<td>動畫播放前後模式，<em>預設 none</em>。<br>其他還有 forwards、backwards、both。</td>
</tr>
<tr>
<td><strong>animation-play-state</strong></td>
<td>動畫播放或暫停狀態，<em>預設 running</em>。<br>其他還有 paused。</td>
</tr>
</tbody>
</table>
<br>
<br>
<span style="color: blue;"><span style="font-size: x-large;">關鍵影格 keyframes</span></span> 的設定可以說是 CSS3 animation 動畫效果的關鍵，要動畫就跑起來，雖要設定關鍵影格，要設定關鍵影格有兩個重點，分別是（from）從哪邊開始跑以及（to）跑到哪裡結束，關鍵影格是透過 percentage 來判斷動畫啟動的時間點以及結束的時間點，0% 代表的是動畫起點，100% 則代表動畫結束點，如 10% 20% ....90% 100% 用 from 與 to 來設定，這部分在範例中也都會看到。關鍵影格描述的是動畫建變過程的外觀，也就是說，除了可以利用關鍵影格來控制 animation 動畫的跑動，也可以控制動畫的顏色,大小 改變。 
</div>

https://www.oxxostudio.tw/articles/201803/css-animation.html

@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;font-size:22px;">
#D1{
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation : MO1 4s infinite ;
}

#D2{
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation : MO2 4s infinite ; }

<div class="bomb">按我</div>
<pre style="font-size:20px;">.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 ;}
 
@keyframes Rafter{ 10% { content: ">>";  }
                   50% { content: ">>>"; }
                   90% { content: ">>";  }  }
 
@keyframes Lbefore { 10% { content: "<<";  }
                     50% { content: "<<<"; }
                     90% { content: "<<";  }  } </pre>

.bomb:active{ border: 5px inset darkgray;  }

.bomb:after { content: ">";
               animation: Rafter 1s linear infinite ;}
.bomb:before  { content: "<";
                 animation: Lbefore 1s linear infinite ;}

@keyframes Rafter{   10% { content: ">>";  }
                     50% { content: ">>>"; }
                     90% { content: ">>";  }  }
 
@keyframes Lbefore { 10% { content: "<<";  }
                     50% { content: "<<<"; }
                     90% { content: "<<";  }  }

</style>

Edit

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單