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。

<div class="class" style="color: gold; font-size: x-large;">
閃爍字體 </div>
<pre>.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;} } </pre>

<div class="bomb">按我</div>
<pre>.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: "<<";  }  } </pre>

.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>

@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">
#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 ; }

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

✍ 📁 🙈 🙉 🙊

html 測試上入下出

html 測試左右各一測試

html 測試單入單出

html 測試左入右出

class="ot"

尾部連結 hbbb(xx)

2020年4月1日星期三