CSS動畫@-webkit-keyframes

時間 2019-12-02

標籤 css 動畫 webkit keyframes 欄目 CSS 简体版

原文原文鏈接

@-webkit-keyframes：以百分比來規定改變發生的時間，或者經過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。0% 是動畫的開始時間，100% 動畫的結束時間。html

display: inline-block;    行內塊元素，不會產生錯位

-webkit-animation-timing-function: linear;   線性過分

-webkit-animation-iteration-count: infinite;   設置循環播放次數：無限次

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         .div1 {
  8             width: 200px;height: 200px;background-color: #ffc602;
  9             margin-top: 100px;
 10             display: inline-block;   
 11  
 12         }
 13         @-webkit-keyframes mycolor1{
 14             0%{
 15                 background-color: #ffc602
 16             }
 17             20%{
 18                 background-color: #1363bc;
 19                 height:250px
 20             }
 21             40%{
 22                 background-color: #cf0fff;
 23                 height:300px
 24             }
 25             60%{
 26                 background-color: #810977;
 27                 height:350px
 28             }
 29             80%{
 30                 background-color: #c91f10;
 31                 height:400px
 32             }
 33             100%{
 34                 background-color: #ffc602;
 35                 height:450px
 36             }
 37  
 38         }
 39         .div1:hover{
 40             -webkit-animation-name: mycolor1;
 41             -webkit-animation-duration: 1s;
 42             -webkit-animation-timing-function: linear;
 43             -webkit-animation-iteration-count: infinite;
 44         }
 45         .div2{
 46             width: 200px;height: 200px;background-color: #ffc602;
 47             margin-top: 100px;
 48             display: inline-block;
 49  
 50         }
 51         @-webkit-keyframes mycolor{
 52             0%{
 53                 background-color: #ffc602
 54             }
 55             20%{
 56                 background-color: #1363bc;
 57                  -webkit-transform: translateY(-10px);
 58                  height: 210px;
 59             }
 60             40%{
 61                 background-color: #cf0fff;
 62                  -webkit-transform: translateY(-20px);
 63                  height: 220px
 64             }
 65             60%{
 66                 background-color: #810977;
 67                 -webkit-transform: translateY(-30px);
 68                 height: 230px
 69             }
 70             80%{
 71                 background-color: #c91f10;
 72                  -webkit-transform: translateY(-40px);
 73                  height: 240px
 74             }
 75             100%{
 76                 background-color: #ffc602;
 77                  -webkit-transform: translateY(-50px);
 78                  height: 250px
 79             }
 80  
 81         }
 82         .div2:hover{
 83             -webkit-animation-name: mycolor;
 84             -webkit-animation-duration: 1s;
 85         -webkit-animation-timing-function: linear;  
 86             -webkit-animation-iteration-count: infinite;   
 87         }
 88         .div3{
 89             height: 40px;width: 40px;background-color: #08446d;
 90             display: inline-block;
 91         }
 92         .div3:hover{
 93  
 94         }
 95     </style>
 96 </head>
 97 <body>
 98 <div class="div1"></div>
 99 <div class="div2"></div>
100 <div class="div3"></div>
101  
102 </body>
103 </html>

@keyframes(關鍵幀)做爲CSS3動畫的一部分，其該緊跟一個標識符(由開發者自定)，此標識符將在其餘CSS代碼中引用。在@keyframes和標識符以後，就是一系列的動畫規則(就像普通的CSS代碼中聲明的style規則)了。這一系列動畫規則用大括號括起來隔開，而後再嵌在@keyframes以後的大括號裏，相似其餘@語法規則。web

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。