css3動畫animation

時間  2019-11-18
標籤 css3 css 動畫 animation 欄目 CSS 简体版
原文   原文鏈接

隨着對html5和css3的運用普及， 頁面中的簡單動畫 也隨之常見，animation就被經常使用，咱們運用Animation就能建立本身想要的一些動畫效果了。css

建議: 若是想要製做簡單的不細緻的動畫效果 animation能夠首選，比較好的動畫，仍是使用flash或js/jquery比較好。html

 1、Keyframes 關鍵幀  html5

   在開始介紹Animation以前咱們有必要先來了解一下"Keyframes",叫作「關鍵幀」。 @keyframes開頭，後面緊接着是這個「動畫的名稱」加上一對花括號"{}"jquery

  使用@keyframes規則，你能夠建立動畫。 建立動畫是經過逐步改變從一個CSS樣式設定到另外一個。css3

    在動畫過程當中，您能夠更改CSS樣式的設定屢次。web

     指定的變化時發生時使用％，或關鍵字"from"和"to"，與0％到100％相同。
     0％是開頭動畫，100％是當動畫完成（中間能夠在屢次定義）。瀏覽器

    寫法 @keyframes  定義的名稱{ide

           0%(from){定義的樣式，其餘}函數

         100%(to){定義的樣式，其餘}動畫

    }

   兼容：  @ -瀏覽器號-keyframes  定義的名稱{

           0%(from){定義的樣式，其餘}

         100%(to){定義的樣式，其餘}

    }

egg:   @keyframes moves{

         0% {background-position: 0 0;}
         50% {background-position: -180px 0;}
         100% {background-position: 0 0;}

}

2、animation的動畫屬性

 （1）animation-name   規定須要綁定到選擇器的 keyframe 名稱
 （2）animation-duration  規定完成動畫所花費的時間，以秒或毫秒計
 （3）animation-timing-function 規定動畫的速度曲線。如linear直線。
 （4）animation-delay 規定在動畫開始以前的延遲。
 （5）animation-iteration-count 規定動畫應該播放的次數。 加入infinite關鍵字，可讓動畫無限次播放。
 （6）animation-direction 規定是否應該輪流反向播放動畫，
 （7）animation-fill-mode 動畫結束之後，會當即從結束狀態跳回到起始狀態。若是想讓動畫保持在結束狀態，須要使用其屬性令其爲forwards。
 （8）animation-play-state:  若是鼠標移走，色塊馬上回到動畫開始狀態。若是想讓動畫保持忽然終止時的狀態，則該屬性值爲paused 設置動畫當前狀態,默認是 running ,爲執行狀態,能夠設置爲 paused 爲暫停

egg:   .demo{
     　　width: 50px;
     　　height: 50px;
     　　background: blue;
    　　 -webkit-animation-name:'moves';/*動畫屬性名，也就是咱們前面keyframes定義的動畫名*/
     　　-webkit-animation-duration: 10s;/*動畫持續時間*/
     　　-webkit-animation-timing-function: ease-in; /*動畫頻率*/
    　　 -webkit-animation-delay: 2s;/*動畫延遲時間*/
    　　 -webkit-animation-iteration-count: 10;/*定義循環次數，infinite爲無限次*/
    　　 -webkit-animation-direction: alternate;/*定義動畫方式*/
  }

爲了方即可以簡寫 規格以下:

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

    egg: animation: moves 10s ease-in 2s 10 alternate 

3、animation各屬性講解

   (1)animation-name 屬性爲 @keyframes 動畫指定名稱

      語法： animation-name: keyframename|none;

      

    egg:    animation-name:mymove;

               -webkit-animation-name:mymove;

   (2)animation-duration 設置對象動畫的播放持續時間    值單位能夠是秒（s）或毫秒（ms）

      語法： animation-duration: time;

       

 （3）animation-timing-function 規定動畫的速度曲線 （動畫播放時的運動方式）

       animation-timing-function使用的數學函數，稱爲三次貝塞爾曲線，速度曲線。使用此函數，您能夠使用您本身的值，或使用預先定義的值之一：

    語法：animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<num1>, <num2>, <num3>, <num4>)

    

  egg:  自定義     .demo { animation-function: cubic-bezier(0.25,0.1,0.25,1);/*自定義的貝塞爾曲線*/ }

   （4）animation-delay 規定在動畫開始以前的延遲（幾秒後開始執行動畫）。

      語法：animation-delay: time;

       

    egg:   .demo {

                 animation-delay:2s;/*動畫將於2s後執行*/

            }

     （5）animation-iteration-count 規定動畫應該播放的次數。 加入infinite關鍵字，可讓動畫無限次播放。

        語法： animation-iteration-count: n | infinite

         

    （6）animation-direction 規定是否應該輪流反向播放動畫，

           注意：若是動畫被設置爲只播放一次，該屬性將不起做用

       語法：animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

        

     （7）animation-fill-mode 動畫結束之後，會當即從結束狀態跳回到起始狀態。若是想讓動畫保持在結束狀態，須要使用其屬性令其爲forwards。

        語法：animation-fill-mode: none | forwards | backwards | both

         

    （8）animation-play-state: 用來控制元素動畫的播放狀態

        語法：animation-play-state: paused | running（默認）

        

 

下面給看幾個作的demo: --簡單粗糙

  一、人物圖片 走動效果(一個走動，一個跳躍，一個高爾夫揮球)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>歡迎訪問 http://www.cnblogs.com/wuchuanlong/</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico" >

<style>  
/*move_img.png上面有 幾個小圖  它的移動位置是100除以幾 約等（=）差%，後面的移動位置即加差(間隔距離要同樣) 知道總和100% 一個循環*/  
body{  font-family: "Microsoft YaHei"; background-color:#9BD2FF }
.elepent_mid{ margin:0 auto; width:580px; position:relative;}
.move_go{ 
   background:url(move_01.png) no-repeat; width:180px; height: 300px; position:absolute; 
    border:1px solid red; 
   animation:chan_run 1s step-start infinite;
   -moz-animation:chan_run 1s step_start infinite;
   -webkit-animation:chan_run 1s step_start infinite;
 }
 @keyframes chan_run{
    0% {background-position: 0 0;}
    14.3% {background-position: -180px 0;}
    28.6% {background-position: -360px 0;}
    42.9% {background-position: -540px 0;}
    57.2% {background-position: -720px 0;}
    71.5% {background-position: -900px 0;}
    85.8% {background-position: -1080px 0;}
    100% {background-position: 0 0;}
  }
  @-moz-keyframes chan_run{
    0% {background-position: 0 0;}
    14.3% {background-position: -180px 0;}
    28.6% {background-position: -360px 0;}
    42.9% {background-position: -540px 0;}
    57.2% {background-position: -720px 0;}
    71.5% {background-position: -900px 0;}
    85.8% {background-position: -1080px 0;}
    100% {background-position: 0 0;}
  }
  @-webket-keyframes chan_run{
    0% {background-position: 0 0;}
    14.3% {background-position: -180px 0;}
    28.6% {background-position: -360px 0;}
    42.9% {background-position: -540px 0;}
    57.2% {background-position: -720px 0;}
    71.5% {background-position: -900px 0;}
    85.8% {background-position: -1080px 0;}
    100% {background-position: 0 0;}
  }
  
 /*第二個原地移動*/
 .secd_yidong{ 
   background:url(pepel_02.png) no-repeat; height:319px; width:150px; position:absolute; top:320px;
   animation:move_two 3s step-start infinite;
   -moz-animation:move_two 3s step-start infinite;
   -webkit-animation:move_two 3s step-start infinite;
  }
  @keyframes move_two{
    0%{ background-position:0 0;}
    25%{ background-position:-150px 0}
    50%{ background-position:-300px 0}
    75%{ background-position:-450px 0}
    100%{ background-position:0 0}
  }
  @-webkit-keyframes move_two{
    0%{ background-position:0 0;}
    25%{ background-position:-150px 0}
    50%{ background-position:-300px 0}
    75%{ background-position:-450px 0}
    100%{ background-position:0px 0}
  }
   @-moz-keyframes move_two{
    0%{ background-position:0 0;}
    25%{ background-position:-150px 0}
    50%{ background-position:-300px 0}
    75%{ background-position:-450px 0}
    100%{ background-position:0px 0}
  }
  
   /*第三個原地移動*/
 .third_03{ 
  background:url(jump_03.png) no-repeat; height:131px; width:61px; position:absolute; top:320px; left:240px; right:0; bottom:0;
   animation:move_03 1s step-start infinite; overflow:hidden;
   -moz-animation:move_03 1s step-start infinite;
   -webkit-animation:move_03 1s step-start infinite;
  }
  @keyframes move_03{
    0%{ background-position:65px 0;}
    11.1%{ background-position:-65px 0}
    22.2%{ background-position:-130px 0}
    33.3%{ background-position:-195px 0}
    44.4%{ background-position:-270px 0}
    55.5%{ background-position:-335px 0;}
    66.6%{ background-position:-400px 0}
    77.7%{ background-position:-465px 0}
    88.8%{ background-position:-530px 0}
    99.9%{ background-position:-595px 0}
    100%{ background-position:0 0}
  }
   @-moz-keyframes move_03{
    0%{ background-position:0 0;}
    11.1%{ background-position:-65px 0}
    22.2%{ background-position:-130px 0}
    33.3%{ background-position:-195px 0}
    44.4%{ background-position:-270px 0}
    55.5%{ background-position:-335px 0;}
    66.6%{ background-position:-400px 0}
    77.7%{ background-position:-465px 0}
    88.8%{ background-position:-530px 0}
    99.9%{ background-position:-595px 0}
    100%{ background-position:0 0}
  }
   @-webkit-keyframes move_03{
    0%{ background-position:0 0;}
    11.1%{ background-position:-65px 0}
    22.2%{ background-position:-130px 0}
    33.3%{ background-position:-195px 0}
    44.4%{ background-position:-270px 0}
    55.5%{ background-position:-335px 0;}
    66.6%{ background-position:-400px 0}
    77.7%{ background-position:-465px 0}
    88.8%{ background-position:-530px 0}
    99.9%{ background-position:-595px 0}
    100%{ background-position:0 0}
  }
</style>
</head>
<body>
 <div class="elepent_mid">
  <!--第一個-->
   <div class="move_go"></div>
  <!--第二個移動-->
  <div class="secd_yidong"></div>
  <!--第三個移動-->
  <div class="third_03"></div>
 </div>
</body>
</html>
View Code

 

 

二、360度 一直旋轉 鼠標懸停放大

 

 1  .animation{ width:150px; height:145px; position:relative; margin:0 auto; transition:all 0.5s linear}
 2  .animation p{ background:url(d_03.png) no-repeat; width:150px; height:145px; cursor:pointer; animation:anita 2s linear 1s infinite; -webkit-animation:anita 2s linear 1s infinite}
 3  .animation span{ display:block; text-align:center; position:absolute; left:0%; right:0; top:38%; bottom:0; margin:auto}
 4  .animation:hover{ color:red; transform:rotate(360deg) scale(1.2)}
 5  @keyframes anita{
 6     0%{ transform:rotate(0deg);}
 7     100%{transform:rotate(360deg);}
 8   }
 9   @-webkit-keyframes anita{
10     0%{ transform:rotate(0deg)}     
11     100%{ transform:rotate(360deg)}     
12   }
13 <!--animation 動畫-->
14   <div class="animation">
15     <p></p>
16     <span>animation<Br />動畫</span>
17   </div>
View Code

 

三、相似 ---移動的星星

 1  /*移動的星星 animation*/
 2  @keyframes star_yidong{
 3    0 %{ background-position:0% 0%; background-color:#fff;}
 4    50 %{ background-position:50% 0%; background-color:#CCC;}
 5    100%{ background-position:100% 0%; background-color:#000;}     
 6  }
 7 @-webkit-keyframes star_yidong{
 8    0 %{ background-position:0% 0%; background-color:#fff;}
 9    50 %{ background-position:50% 0%; background-color:#CCC;}
10    100%{ background-position:100% 0%; background-color:#000;}     
11  }
12  @-moz-keyframes star_yidong{
13    0 %{ background-position:0% 0%; background-color:#fff;}
14    50 %{ background-position:50% 0%; background-color:#CCC;}
15    100%{ background-position:100% 0%; background-color:#000;}     
16  }
17  @-o-keyframes star_yidong{
18    0 %{ background-position:0% 0%; background-color:#fff;}
19    50 %{ background-position:50% 0%; background-color:#CCC;}
20    100%{ background-position:100% 0%; background-color:#000;}     
21   }
22 .move_star{ position:relative; width:100%; height:600px; margin:0 auto; margin-top:20px}
23 .star_01{ position:absolute; left:0; right:0; top:0; bottom:0; margin:auto}
24  #xing01{ 
25   background:url(img/background.png) repeat;  z-index:4;
26   animation:star_yidong 60s linear infinite; 
27   -webkit-animation:star_yidong 60s linear infinite;
28   -moz-animation:star_yidong 60s linear infinite;
29   -o-animation:star_yidong 60s linear infinite;
30  }
31  #xing02{ 
32   background:url(img/foreground.png) repeat; z-index:4; 
33   animation:star_yidong 80s linear infinite; 
34   -webkit-animation:star_yidong 80s linear infinite;
35   -moz-animation:star_yidong 80s linear infinite;
36   -o-animation:star_yidong 80s linear infinite;
37  }
38  #xing03{
39     background:url(img/midground.png) repeat; z-index:4;
40     animaition:star_yidong 100s ease-in infinite;
41     -webkit-animation:star_yidong 100s ease-in infinite;
42     -moz-animation:star_yidong 100s ease-in infinite;
43     -o-animation:star_yidong 100s ease-in infinite;
44  }
45 /*閃動的星星*/
46  #xing04{
47     background:url(img/stars.png) repeat; z-index:4;
48  }
49  #xing05{
50      background:url(img/twinkling.png) repeat; z-index:4;
51      animaition:move-twink-back 200s linear infinite;
52     -webkit-animation:move-twink-back 200s linear infinite;
53     -moz-animation:move-twink-back 200s linear infinite;
54     -o-animation:move-twink-back 200s linear infinite;
55   }
56   @keyframes move-twink-back {
57     from {background-position:0 0;}
58     to {background-position:1000px 5000px;}
59 }
60 @-webkit-keyframes move-twink-back {
61     from {background-position:0 0;}
62     to {background-position:1000px 5000px;}
63 }
64 @-moz-keyframes move-twink-back {
65     from {background-position:0 0;}
66     to {background-position:1000px 5000px;}
67 }
68 <!--移動的星星-->
69   <div class="move_star">
70     <div id="xing01" class="star_01"></div>
71     <div id="xing02" class="star_01"></div>
72     <div id="xing03" class="star_01"></div>
73     <!--閃動的星星-->
74     <div id="xing04" class="star_01"></div>
75     <div id="xing05" class="star_01"></div>
76   </div>
View Code

 

 

學無止境，樂在其中

css參考手冊：http://www.css88.com/book/css/properties/animation/animation.htm

屬性借鑑來源： http://www.runoob.com/cssref/css3-pr-animation.html    

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程