1. 程式人生 > >從零開始前端學習[33]:Cs3中的transition過渡-animation動畫

從零開始前端學習[33]:Cs3中的transition過渡-animation動畫

Cs3中的transition過渡-animation動畫

  1. transition過渡
  2. animation動畫

transition過渡

記得在html學習中,提到過transition和transform這兩個屬性值,transfrom對應的是動畫,transition對應的是過度過程。
而這個transition就是這個過渡過程,其詳細屬性主要包括一下幾個,

屬性 屬性值
transition-property 要過渡的屬性的名稱
transition-duration 過渡效果持續時間
transition-delay 延遲過渡時間(可以不寫)
transition-timing-function 過渡效果的執行曲線,有linear(勻速),ease(慢快慢),ease-in(勻加速),ease-out(勻減速)
transition複合屬性 複合屬性的使用,也就是上述幾個屬性的結合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <title>Title</title> <meta charset="UTF-8"><!--申明當前網頁的編碼集UTF-8--> <meta name="Generator" content="EditPlus®"> <!--編輯器的名稱--> <meta name="Author" content="作者是誰"> <meta name="Keywords" content="關鍵詞"> <meta
name="Description" content="描述和簡介">
<style type="text/css"> body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;} ul,ol{margin: 0; list-style: none; padding: 0;} a{ text-decoration: none; } *{ margin: 0; padding: 0; } .main{width: 1200px;box-shadow: 0 0 10px 0 deeppink;margin: 20px auto;border: 1px solid transparent} .main p{width: 50px;height: 50px;background-color: #00dd00;text-align: center;margin:10px;line-height: 50px} .main .circle{border-radius: 50%;transition: 3s} .main .circle:hover{transform: rotate(360deg)} .main p:nth-child(2){ transition-property: width,font-size,line-height; transition-duration: 3s; transition-timing-function: linear} .main p:nth-child(2):hover{width: 800px;height: 100px;font-size: 30px;line-height: 100px} /*s使用複合屬性*/ .main p:nth-child(3){ transition: width 2s linear,height 3s ease,color 3s ease-in,line-height 2s linear} .main p:nth-child(3):hover{width: 800px;height: 100px;font-size: 30px;color: red; line-height: 100px} /*使用一般的過渡**/ .main p:nth-child(4){ transition-property: width,line-height; transition-duration: 3s; transition-delay:2s; transition-timing-function: ease} .main p:nth-child(4):hover{width: 600px;line-height: 50px;} /**勻加速*/ .main p:nth-child(5){ transition-property: width; transition-duration: 3s; transition-timing-function:ease-in } .main p:nth-child(5):hover{width: 600px;line-height: 50px;} /*勻減速*/ .main p:nth-child(6){ transition-property: width; transition-duration: 3s; transition-timing-function:ease-out } .main p:nth-child(6):hover{width: 600px;line-height: 50px;} </style> </head> <body> <div class="main"> <p class="circle">1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> </div> </body> </html>

顯示效果如下所示:

這裡寫圖片描述

注意複合屬性的時候,是可以跟多個過渡效果的,如果針對每個不同的屬性設定不同的過渡效果

animation動畫

相比過度來說,整個動畫的難度上面是大了很多很多的,不再是簡單的動畫,很多時候css3都是需要去做自定義動畫,這裡面涉及到一些簡單的邏輯關係等。其主要分為以下幾個步驟:

  1. 定義動畫
  2. 動畫呼叫及相關屬性設定

定義動畫

動畫的定義大概形式如下所示:注意,動畫是需要用到定位的,否則無法在父級中進行位置設定,動畫名稱可以隨意進行設定

@-webkit-keyframes  animationname{  
    keyframes-selector{css-style}
}
animationname:自定義動畫名稱
keyframes-selector:動畫時長百分比
0%-100%(在之間需要執行什麼事件)
from(0%)  to(100%)  
Css-style:一個或多個合法的css屬性

第一種關於動畫定義的形式(根據其中的各個狀態來進行劃分):

  @-webkit-keyframes play{
        0%{left:0; top: 0;}/*動畫開始時的初始狀態,可以不寫*/
        25%{left:400px; top: 0;}/*動畫從0到25%的目的地*/
        50%{left:400px; top: 300px;} /*動畫從25%到50%的目的地*/
        75%{left:0; top: 300px;} /**動畫從50%到75%的目的地*/
        0%{left:0; top: 0;} /*可以不寫,不寫也有預設的,是回到起點*/
    }

第二種關於動畫定義的形式(根據):

@-webkit-ketframes play{
    from(left 0px; top:0px);
    to(left 400px;top 0px);
}   

第二種的形式相對來說比較簡單點,用比較少,因為其只有兩種狀態,一個是起點狀態,另外一個是終點狀態

動畫呼叫及相關屬性設定

動畫定義完畢之後,只需要在css中進行引用和呼叫的,包括了一些屬性,比如全過程的時間,延遲時間,動畫執行的曲線,播放次數,以及是否反向等一些屬性設定的

關於動畫的單個屬性設定

屬性 屬性含義 屬性值
animation-name 動畫名稱 屬性值為自定義的動畫的名字
animation-duration 動畫持續的時間 類似4s這樣的設定
animation-delay 動畫延遲執行的時間 類似4s這樣的設定
animation-timing-function 動畫運動曲線 linear(線性),ease(慢快慢),ease-in(勻加速),ease-out(勻減速)
animation-iteration-count 動畫執行的次數 可以直接設定為具體次數,沒有單位,或者infinite無限迴圈
animation-direction 是否反向播放動畫 alternation為反向播放動畫
animation-play-state 動畫的開關 runing(動畫開),paused(動畫關)

例項程式碼如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明當前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">       
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
    div {width: 500px;height: 400px;position: relative;box-shadow: 0 0 10px 0 deeppink;margin:10px auto;border: 1px solid red}
    div p{width: 100px;height: 100px;position: absolute;left: 0;top: 0;background-color: greenyellow;line-height: 100px;text-align: center}
    .box1 p{
      animation-name: box1_p_animation; /*動畫名稱載入*/
      animation-duration: 4s; /*動畫持續時間*/
      animation-delay: 1s;  /**動畫的延長時間*/
      animation-iteration-count:infinite ; /**動畫執行的次數*/
      animation-timing-function: ease; /**動畫運動的速度*/
      animation-direction: alternate ; /*動畫是否執行*/
    }
    .box1 p{animation-play-state: paused}
    .box1:hover p{animation-play-state: running}

    .box2 p{
      animation-name: box2_p_animation;
      animation-duration: 2s;
      animation-delay: 1s;
      animation-iteration-count:infinite ; /**動畫執行的次數*/
      animation-timing-function: ease; /**動畫運動的速度*/
      animation-direction: alternate ;
    }

    @-webkit-keyframes box1_p_animation {
      0%{left:0;top: 0}
      25%{left: 400px;top:0}
      50%{left:400px;top:300px}
      75%{left:0px; top: 300px;}
      0%{
        left: 0px;
        top: 0px;}
    }

    @-webkit-keyframes  box2_p_animation{
      from{left: 0px;top: 0px}
      to{
        left: 400px;
        top: 300px;}
    }
  </style>
</head>
<body>
  <div class="box1">
    <p>first</p>
  </div>
  <div class="box2">
    <p>second</p>
  </div>
</body>
</html>

顯示效果:

這裡寫圖片描述

以上就是關於動畫的最簡單的案例程式碼
歡迎持續訪問部落格