CSS動畫基礎知識

時間  2020-08-12
標籤 css 動畫 基礎 知識 欄目 CSS 简体版
原文   原文鏈接

      CSS動畫就是經過CSS （Cascading Style Sheet，層疊樣式表）代碼搭建的網頁動畫。它容許設計師和開發人員經過編輯網站的CSS代碼來添加頁面動畫，從而輕鬆取代傳統動畫圖片或flash動畫的設計方式。html

      transition（過渡）和animation（動畫）是CSS3中的兩種動畫屬性。web

      transition強調過渡，是元素的一個或多個屬性發生變化時產生的過渡效果，同一個元素經過兩個不一樣的途徑獲取樣式，而第二個途徑當某種改變發生（例如hover）時才能獲取樣式，這樣就會產生過渡動畫。瀏覽器

      animation強調流程與控制，對元素的一個或多個屬性的變化進行控制，能夠有多個關鍵幀（animation 和@ keyframes結合使用）。ide

1．transition 屬性

      transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：函數

      transition-property、transition-duration、transition-timing-function、transition-delay。flex

      （1）transition-duration屬性。動畫

       transition-duration 屬性規定完成過渡效果須要花費的時間（以秒或毫秒計）。其格式爲：網站

           transition-duration: time;url

       屬性值time規定完成過渡效果須要花費的時間（以秒或毫秒計）。默認值是 0，意味着不會有效果。spa

      若想獲得動畫效果，須要指定transition-duration屬性，不然持續時間爲0，transition不會有任何效果。

      （2）transition-delay 屬性。

       transition-delay 屬性規定過渡效果什麼時候開始。其格式爲：

         transition-delay: time;

      屬性值time規定在過渡效果開始以前須要等待的時間，以秒或毫秒計。

      （3）transition-property屬性。

      transition-property屬性指定CSS屬性的nametransition效果（transition效果時將會啓動指定的CSS屬性的變化）。其格式爲：

          transition-property: none |all | property;

       其中，屬性值none表示沒有屬性會得到過渡效果；屬性值all表示全部屬性都將得到過渡效果；property   定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。

      （4）transition-timing-function 屬性。

      transition-timing-function屬性指定切換效果的速度。此屬性容許一個過渡效果，以改變其持續時間的速度。其格式爲：

         transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

各屬性值的功能描述以下：

linear      規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。

ease     規定慢速開始，而後變快，而後慢速結束的過渡效果（等於cubic-bezier(0.25,0.1,0.25,1)）。

ease-in    規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。

ease-out   規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。

ease-in-out      規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(n,n,n,n)     在cubic-bezier 函數中定義本身的值。可能的值是 0 至 1 之間的數值。

例1  transition 屬性的簡單應用。

      先看一個簡單的例子，體會transition 屬性的應用。

       在頁面中放置一個類名爲container的層做爲效果展現容器，在該層中再定義一個類名爲move-box的層做爲應用過渡效果的對象，HTML代碼描述以下：

<div  class="container">

  <div class="move-box">

  </div>

</div>

爲兩個層定義CSS樣式以下：

.container

{

     width: 300px;

     height: 200px;

     border: 4px solid rgba(255, 0, 0, 0.9);

}

.move-box

{

     left:0;

     width: 50px;

     height: 50px;

     position: relative;

     background: rgb(0,0,255);

}

這樣，在頁面中會顯示如圖1所示的圖形。

圖1  兩個層在頁面中的顯示

      爲.containe層添加鼠標懸停樣式規則，設置move-box層的left屬性值爲250px，這樣當鼠標懸停在圖1所示的紅色矩形框中，藍色正方形會移動到紅色矩形框的最右端。

.container:hover .move-box

{

     left:250px;

}

      但這個移動是瞬時完成的，沒有任何過渡效果，更談不上動畫了。爲此，須要爲這個移動的變化設置transition屬性。增長樣式規則以下：

.container .move-box

{

    transition-duration: 2s;

}

      此時，能夠獲得如圖2所示的藍色小正方形移動的動畫效果。當鼠標懸停在紅色矩形框中時，藍色小正方形從左向右移動；當鼠標移離時，藍色小正方形從右向左移動。

 

圖2 藍色小正方形移動：雙向過渡效果

      完整的HTML代碼以下。

<!DOCTYPE html>
<html>
<head>
<title>transition 屬性的簡單應用</title>
<style>
.container
{
     width: 300px;
     height: 200px;
     border: 4px solid rgba(255, 0, 0, 0.9);
}
.move-box
{
     left:0;
     width: 50px;
     height: 50px;
     position: relative;
     background: rgb(0,0,255);
}
.container .move-box
{
    transition-duration: 2s;
}
.container:hover .move-box
{
     left:250px; 
}
</style>
</head>
<body>
<div  class="container">
  <div class="move-box">
  </div>
</div>
</body>
</html>
View Code

      在這個例子中，在.container .move-box 中設置了過渡動畫完成的時間爲2秒鐘（transition-duration: 2s;），這樣在left屬性變化時會產生過渡動畫效果，而這種效果的產生有兩種途徑：一種是鼠標在container上懸停， move-box的樣式從默認樣式到.container:hover的樣式，left屬性發生了變化，觸發了過渡效果； 一種是鼠標移離container層，move-box的樣式從.container:hover的樣式回到默認樣式，left也變化了，所以也產生了過渡效果。這兩個方向上的過渡都是平滑不突兀的。

      若將.container .move-box樣式定義中的transition-duration: 2s;移到.container:hover .move-box中，並刪除.container .move-box樣式定義，以下：

.container:hover .move-box

{

     left:250px;    

     transition-duration: 2s;

}

      此時，過渡動畫是單一方向上的，當鼠標在container上懸停時， move-box的樣式從默認樣式到.container:hover的樣式，left屬性發生了變化，觸發了過渡效果； 當鼠標移離container層，move-box的樣式從.container:hover的樣式回到默認樣式，left也變化了，但此時不是過渡動畫的方式，而是直接回到默認，看上去比較突兀和生硬。效果如圖3所示。

 

圖3  藍色小正方形移動：單一方向上有過渡效果

      例1中的過渡動畫效果是經過改變更畫元素的left屬性，從而使得元素的位置發生改變而獲得的。爲了對選定元素進行更多的變換，能夠應用transform屬性。

      transform屬性應用於元素的2D或3D轉換。這個屬性容許將元素旋轉、縮放、移動、傾斜等。其基本使用格式爲：

          transform: none|transform-functions;

       其中，屬性值none表示不進行轉換；屬性值transform-functions表示所採用的轉換函數，可應用的轉換函數和功能描述以下：

matrix(n,n,n,n,n,n)   定義 2D 轉換，使用六個值的矩陣。

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)     定義 3D 轉換，使用16個值的4x4矩陣。

translate(x,y)          定義 2D 平移轉換。

translate3d(x,y,z)       定義 3D 平移轉換。

translateX(x)           定義X 軸平移轉換

translateY(y)           定義Y 軸平移轉換

translateZ(z)           定義 Z 軸3D 平移轉換

scale(x[,y])             定義 2D 縮放轉換。

scale3d(x,y,z)           定義 3D 縮放轉換。

scaleX(x)             經過設置 X 軸的值來定義縮放轉換。

scaleY(y)             經過設置 Y 軸的值來定義縮放轉換。

scaleZ(z)             經過設置 Z 軸的值來定義 3D 縮放轉換。

rotate(angle)           定義 2D 旋轉，在參數中規定角度。

rotate3d(x,y,z,angle)      定義 3D 旋轉。

rotateX(angle)         定義沿着 X 軸的 3D 旋轉。   

rotateY(angle)         定義沿着 Y 軸的 3D 旋轉。

rotateZ(angle)         定義沿着 Z 軸的 3D 旋轉。

skew(x-angle,y-angle)    定義沿着 X 和 Y 軸的 2D 傾斜轉換。

skewX(angle)          定義沿着 X 軸的 2D 傾斜轉換。

skewY(angle)          定義沿着 Y 軸的 2D 傾斜轉換。

perspective(n)         爲 3D 轉換元素定義透視視圖。

例如，transform: translate(50px,100px);表示元素從左邊移動50個像素，並從頂部移動100像素。

將例1中.container:hover .move-box的定義修改成：

.container:hover .move-box

{

      transform: translate(250px,0);

}

或

.container:hover .move-box

{

      transform: translateX(250px);

}

一樣能夠實現如圖2所示的頁面效果。但transform屬性的設置更靈活。

例如，將例1中.container:hover .move-box的定義修改成：

.container:hover .move-box

{

      transform: translate(250px,150px);

}

      則可獲得如圖4所示的動畫效果。此時，藍色小正方形在水平和垂直方向上都發生了平移。

 

圖4  藍色小正方形沿對角線平移

再如，將例1中.container:hover .move-box的定義修改成：

.container:hover .move-box

{

      transform:  rotate(45deg) translateX(200px);

}

則可獲得如圖5所示的動畫效果。

 

圖5  藍色小正方形旋轉並平移

      例2  圖片的平移、縮放和旋轉變換。

      在頁面中放置一個類名爲container的層做爲效果展現容器，在該層中再定義一個9個子層，每一個子層中放置一幅圖片，爲圖片添加鼠標懸停變換效果，當鼠標懸停在某幅圖片上時，該圖片或平移、或縮放、或旋轉。編寫完整的HTML代碼以下。

<!DOCTYPE html>
<html>
<head>
<title>圖片的平移、縮放和旋轉變換</title>
<style>
   *{
      margin: 0;
      padding: 0;
   }
   .container
   {
     border: 3px solid rgba(255, 0, 255, 0.9);
      width: 1000px;
      height: 600px;
      display: flex;
      margin-left: 200px;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      align-content: space-around;
   }
   .container>div
   {
      width: 300px;
      height: 150px;
      transition-duration: 2s;
   }
   .container>div>img
   {
      width: 100%;
      height: 100%;
   }
   .container>div:nth-child(1):hover
   {
       transform: translate(665px,200px);
   }
   .container>div:nth-child(2):hover
   {
       transform: rotateX(60deg);  
   }
   .container>div:nth-child(3):hover
   {
       transform: rotateY(60deg);
   }
   .container>div:nth-child(4):hover
   {
       transform: rotateX(360deg);
   }
   .container>div:nth-child(5):hover
   {
      transform: scale(2);
   }
   .container>div:nth-child(6):hover
   {
      transform: rotateY(360deg);
   }
   .container>div:nth-child(7):hover
   {
      transform: rotateZ(360deg); 
   }
   .container>div:nth-child(8):hover
   {
      transform: rotateZ(180deg);
   }
   .container>div:nth-child(9):hover
   {
      transform: skew(30deg);  
   }
</style>
</head>
<body>
<div class="container">
     <div><img src="mlh.jpg" alt=""/></div>
     <div><img src="mls.jpg" alt=""/></div>
     <div><img src="mltc.png" alt=""/></div>
     <div><img src="mlyws.png" alt=""/></div>
     <div><img src="hhl.jpg" alt=""/></div>
     <div><img src="mlcy.png" alt=""/></div>
     <div><img src="mlmgy.png" alt=""/></div>
     <div><img src="mljlg.png" alt=""/></div>
     <div><img src="mlqlz.png" alt=""/></div>
 </div>
</body>
</html>
View Code

在瀏覽器中打開保存上述HTML代碼的html文件，在瀏覽器中呈現出如圖6所示的變換效果（部分示例）。

 

圖6  圖片旋轉

      transition的優勢在於簡單易用，可是它有幾個很大的侷限。

      （1）transition須要事件觸發，因此無法在網頁加載時自動發生。例1和例2都是採用僞選擇器hover，在鼠標懸停時產生動畫效果。

      （2）transition是一次性的，不能重複發生，除非一再觸發。

      （3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。例如，例1中的藍色小正方形只能沿一條指定的路線移動。若想讓藍色小正方形沿着上下左右邊界轉圈移動，transition屬性就無法作到。

      CSS Animation就是爲了解決這些問題而提出的。

2．animation 屬性

      animation 屬性是六個動畫屬性的簡寫屬性，這6個屬性是animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction。

       （1）animation-name屬性。

       animation-name 屬性爲 @keyframes 動畫規定名稱。其格式爲：

            animation-name: keyframename|none;

       其中，屬性值keyframename規定須要綁定到選擇器的keyframe的名稱。屬性值none規定無動畫效果（可用於覆蓋來自級聯的動畫）。

       （2）animation-duration屬性。

       animation-duration 屬性定義動畫完成一個週期所須要的時間，以秒或毫秒計。其格式爲：  animation-duration: time;

       （3）animation-timing-function屬性。

       animation-timing-function屬性規定動畫的速度曲線。速度曲線用於，使變化更爲平滑。其格式爲：

          animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

各屬性值的功能描述以下：

linear          動畫從頭至尾的速度是相同的。

ease         默認。動畫以低速開始，而後加快，在結束前變慢。

ease-in        動畫以低速開始。

ease-out       動畫以低速結束。

ease-in-out      動畫以低速開始和結束。

cubic-bezier(n,n,n,n)     在 cubic-bezier 函數中定義本身的值。可能的值是從 0 到 1 的數值。

（4）animation-delay屬性。

       animation-delay 屬性定義動畫何時開始。其格式爲：

           animation-delay: time;

       屬性值time單位能夠是秒（s）或毫秒（ms）。而且time容許負值，-2s 使動畫立刻開始，但跳過 2 秒進入動畫。

       （5）animation-iteration-count屬性。

       animation-iteration-count 屬性定義動畫的播放次數。其格式爲：

          animation-iteration-count: n|infinite;

       其中，屬性值n定義動畫播放次數的數值；屬性值infinite規定動畫應該無限次播放。

      （6）animation-direction屬性。

       animation-direction屬性規定是否應該輪流反向播放動畫。其格式爲：

           animation-direction: normal|reverse|alternate|alternate-reverse;

       其中，屬性值normal表示以正常的方式播放動畫；reverse   以相反方向播放動畫；alternate  播放動畫時，每奇數時間（1,3,5…）正常播放，每偶數時間（2,4,6…）反方向播放； alternate-reverse播放動畫時，每奇數時間（1,3,5…）反方向播放，每偶數時間（2,4,6…）正常播放。

       例3  沿着容器邊框轉圈移動的藍色小正方形。

       修改例1中的效果，使得藍色小正方形能夠沿着上邊框、右邊框、下邊框和左邊框循環轉圈。編寫HTML文件以下。

<!DOCTYPE html>
<html>
<head>
<title>沿邊框四周移動的小正方形</title>
<style>
.container
{
     width: 300px;
     height: 200px;
     border: 4px solid rgba(255, 0, 0, 0.9);
}
.move-box
{
     left:0;
     top:0;
     width: 50px;
     height: 50px;
     position: relative;
     background: rgb(0,0,255);
     animation:myfirst 5s infinite;
}
@keyframes myfirst
{
    0%    { left:0px; top:0px;}
25%   { left:250px; top:0px;}
50%   { left:250px; top:150px;}
75%   { left:0px; top:150px; }
100%  { left:0px; top:0px;}
}
</style>
</head>
<body>
<div  class="container">
  <div class="move-box">
  </div>
</div>
</body>
</html>
View Code

      在瀏覽器中打開保存上述HTML代碼的html文件，在瀏覽器中呈現出如圖7所示的動畫效果。

 

圖7  沿四周循環轉圈的小正方形

      如在上面CSS定義的「animation:myfirst 5s infinite;」語句後，再加上一條語句「animation-direction:alternate;」 ，則獲得如圖8所示的動畫效果，與圖7的不一樣之處在於，偶數運動週期時，小正方形的移動方向沿着「左邊框-->下邊框-->右邊框-->上邊框」。

 

圖8  沿四周循環轉圈的小正方形

      須要說明的是：Internet Explorer 十、Firefox 以及 Opera 等支持 animation 屬性，Safari 和 Chrome 支持替代的 -webkit-animation 屬性，而Internet Explorer 9 以及更早的版本不支持 animation 屬性。所以，從瀏覽器兼容性的角度出發，在例3的HTML文件的CSS定義中可加上以下定義：

@-webkit-keyframes myfirst

{

    0%    { left:0px; top:0px;}

   25%   { left:250px; top:0px;}

   50%   { left:250px; top:150px;}

   75%   { left:0px; top:150px; }

   100%  { left:0px; top:0px;}

} 

      例4  圖片的縮放、旋轉和傾斜動畫。

      在頁面中放置一個類名爲container的層做爲效果展現容器，在該層中再定義一個4個子層，每一個子層中放置一幅圖片，爲每幅圖片添加動畫效果，第1幅圖片縮小後放大，第2幅圖片繞X軸翻轉，第3幅圖片沿Z軸旋轉，第4幅圖片傾斜。編寫完整的HTML代碼以下。

<!DOCTYPE html>
<html>
<head>
<title>圖片的縮放、旋轉和傾斜變換</title>
<style>
   *{
      margin: 0;
      padding: 0;
   }
   .container
   {
      border: 3px solid rgba(255, 0, 255, 0.9);
      width: 850px;
      height: 550px;
      display: flex;
      margin: 0 auto;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      align-content: space-around;
   }
   .container>div
   {
      width: 400px;
      height:250px;
   }
   .container>div>img
   {
      width: 100%;
      height: 100%;
   }
   .container>div:nth-child(1)
   {
      animation:myAnim1 3s infinite;
   }
   @keyframes myAnim1
   {
      0%    { transform: none;}
      50%   { transform: scale(0);}
      100%  { transform: scale(1);}
   }
   .container>div:nth-child(2)
   {
      animation:myAnim2 3s infinite;
   }
   @keyframes myAnim2
   {
      0%    { transform: none;}
      100%  { transform: rotateX(360deg);}
   }
   .container>div:nth-child(3)
   {
      animation:myAnim3 3s infinite;
   }
   @keyframes myAnim3
   {
      from    { transform: none;}
      to      { transform: rotateZ(360deg);}
   }
   .container>div:nth-child(4)
   {
      animation:myAnim4 3s infinite;
   }
   @keyframes myAnim4
   {
      0%    { transform: none;}
      33%  { transform: skew(15deg,15deg);}
      67%   { transform: skew(-15deg,-15deg);}
      100%  { transform: skew(0deg,0deg);}
   }
</style>
</head>
<body>
<div class="container">
     <div><img src="mlh.jpg" alt=""/></div>
     <div><img src="hhl.jpg" alt=""/></div>
     <div><img src="mlcy.png" alt=""/></div>
     <div><img src="mltc.png" alt=""/></div>
</div>
</body>
</html>
View Code

      在瀏覽器中打開保存上述HTML代碼的html文件，在瀏覽器中呈現出如圖9所示的動畫效果。

 

圖9  圖片的縮放、旋轉和傾斜動畫

      例5  旋轉的文字。

      在頁面中放置一個類名爲container的層做爲效果展現容器，在該層中再定義一個3個子層，每一個子層中放置一個漢字，爲每一個漢字所在的層添加動畫效果，第1個漢字水平翻轉，第2個漢字繞中心旋轉，第3個漢字垂直翻轉。編寫完整的HTML代碼以下。

<!DOCTYPE html>
<html>
<head>
<title>歡樂頌</title>
<style>
.container
{
   margin: 0 auto;
   width: 650px;
   height: 250px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   border: 4px solid rgba(255, 0, 0, 0.9);
} 
.container>div
{
   width:200px;
   height:200px;
   margin:20px auto;
   text-align: center;
   font:800 100px/200px "隸書";
   border-radius: 50%;
   transform-origin:center 50%;
}
.container>div:nth-child(1)
{
   background:#f00;
   animation: anim1 2s infinite linear;
}
@keyframes anim1
{
    from { transform: rotate(0);}
    to   { transform: rotateX(360deg);}
}
.container>div:nth-child(2)
{
   background:#0f0;
   animation: anim2 2s infinite linear;
}
@keyframes anim2
{
    from { transform: rotate(0);}
    to   { transform: rotate(360deg);}
}
.container>div:nth-child(3)
{
   background:#00f;
   animation: anim3 2s infinite linear;
}
@keyframes anim3
{
    from { transform: rotate(0);}
    to   { transform: rotateY(360deg);}
}
</style>
</head>
<body>
<div  class="container">
<div>歡</div><div>樂</div><div>頌</div>
</div>    
</body>
</html>
View Code

      在瀏覽器中打開保存上述HTML代碼的html文件，在瀏覽器中呈現出如圖10所示的動畫效果。

 

圖10  漢字的旋轉

       例6  旋轉的風車。

      預先準備好一張風車的圖片，在頁面中放置一個類名爲container的層做爲效果展現容器，將風車圖片做爲該層的背景圖片。鼠標懸停在層上時，風車旋轉，鼠標移離，風車中止旋轉。編寫完整的HTML代碼以下。

<!DOCTYPE html>
<html>
<head>
<title>旋轉的風車</title>
<style>
.container
{
   margin: 0 auto;
   background-image: url(a1.png);
   width: 300px;
   height: 300px;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 50%;
   vertical-align: middle;
   border: 4px solid rgba(255, 0, 0, 0.9);
} 
.container:hover {
   animation: anim 2s linear infinite;
}
@keyframes anim 
{
   0%   {  transform: rotate(0deg);    }
   100% {  transform: rotate(360deg);  }
}
</style>
</head>
<body>
<div  class="container"></div>    
</body>
</html>
View Code

      在瀏覽器中打開保存上述HTML代碼的html文件，在瀏覽器中呈現出如圖11所示的動畫效果。

 

圖11  旋轉的風車

      例7  方和圓。

      實現方形變換爲圓形，編寫HTML代碼以下。

<!DOCTYPE html>
<html>
<head>
<title>方和圓</title>
<style>
.container
{
   margin: 0 auto;
   width: 350px;
   height: 250px;
   border: 4px solid rgba(255, 0, 0, 0.9);
} 
.container>div
{
   width:100px;
   height:100px;
   position: relative;
   left:0;
   top:75px;
   animation: anim1 4s infinite;      
}
@keyframes anim1
{
    from 
    {    
        background:#f00;
        transform:translate(0,0);
    }
    to   
    { 
        background:#00f;
        transform:translate(250px,0);
        border-radius: 50%;
    }
}
</style>
</head>
<body>
<div  class="container">
<div></div>
</div>    
</body>
</html>
View Code

      在瀏覽器中打開保存上述HTML代碼的html文件，在瀏覽器中呈現出如圖12所示的動畫效果。

 

圖12  方和圓的變換

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