1. 程式人生 > >CSS3 transition動畫、transform變換、animation動畫

CSS3 transition動畫、transform變換、animation動畫

一、CSS3 transition動畫

transition可以實現動態效果,實際上是一定時間之內,一組css屬性變換到另一組屬性的動畫展示過程。

屬性引數:

1、transition-property 設定過渡的屬性,比如:width height background-color
2、transition-duration 設定過渡的時間,比如:1s 500ms
3、transition-timing-function 設定過渡的運動方式

  • linear 勻速
  • ease 開始和結束慢速
  • ease-in 開始是慢速
  • ease-out 結束時慢速
  • ease-in-out 開始和結束時慢速
  • cubic-bezier(n,n,n,n)

4、transition-delay 設定動畫的延遲
5、transition: property duration timing-function delay 同時設定四個屬性

舉例:

<style type="text/css">        
.box{
    width:100px;
    height:100px;
    background-color:gold;
    transition:width 300ms ease,height 300ms ease 300ms,background-color 300ms ease 600ms;            
}
.box:hover{
    width:300px;
    height:300px;
    background-color:red;
}
</style>
......
<div class="box"></div>


二、CSS3 transform變換

       css3引入了一些可以對網頁元素進行變換的屬性,比如旋轉,縮放,移動,或者沿著水平或者垂直方向扭曲(斜切變換)等等。這些的基礎都是transform屬性,transform屬性有一項奇怪的特性,就是它們對於其周圍的元素不會產生影響。換句話說,如果將一個元素旋轉45度,它實際上是重疊在元素的上方,下方或者旁邊。而不會移動其周圍的內容。

屬性引數:

1、translate(x,y) 設定盒子位移
2、scale(x,y) 設定盒子縮放
3、rotate(deg) 設定盒子旋轉
4、skew(x-angle,y-angle) 設定盒子斜切
5、perspective 設定透視距離
6、transform-style flat | preserve-3d 設定盒子是否按3d空間顯示
7、translateX、translateY、translateZ 設定三維移動
8、rotateX、rotateY、rotateZ 設定三維旋轉
9、scaleX、scaleY、scaleZ 設定三維縮放
10、tranform-origin 設定變形的中心點
11、backface-visibility 設定盒子背面是否可見

舉例:(翻面效果)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻面</title>
    <style type="text/css">
        .box{
            width:300px;
            height:272px;
            margin:50px auto 0;
            transform-style:preserve-3d;
            position:relative;            
        }
        .box .pic{
            width:300px;
            height:272px;
            position:absolute;
            background-color:cyan;
            left:0;
            top:0;
            transform:perspective(800px) rotateY(0deg);
            backface-visibility:hidden;
            transition:all 500ms ease;
        }
        .box .back_info{
            width:300px;
            height:272px;
            text-align:center;
            line-height:272px;
            background-color:gold;
            position:absolute;
            left:0;
            top:0;
            transform:rotateY(180deg);
            backface-visibility:hidden;
            transition:all 500ms ease;            
        }
        .box:hover .pic{
            transform:perspective(800px) rotateY(180deg);
        }
        .box:hover .back_info{
            transform:perspective(800px) rotateY(0deg);
        }
    </style>
</head>
<body>
    <div class="box">        
        <div class="pic"><img src="images/location_bg.jpg"></div>
        <div class="back_info">背面文字說明</div>
    </div>
</body>
</html>

 

三、CSS3 animation動畫

transition只能從一組css屬性變成另一組css屬性。animation則可以在多組屬性之間變換。transition必須使用觸發器觸發,animation可以使用觸發器,也可以在頁面載入完成的時候自動觸發。

屬性引數:

1、@keyframes 定義關鍵幀動畫
2、animation-name 動畫名稱
3、animation-duration 動畫時間
4、animation-timing-function 動畫曲線

  • linear 勻速
  • ease 開始和結束慢速
  • ease-in 開始是慢速
  • ease-out 結束時慢速
  • ease-in-out 開始和結束時慢速
  • steps 動畫步數

5、animation-delay 動畫延遲
6、animation-iteration-count 動畫播放次數 n|infinite
7、animation-direction

  • normal 預設動畫結束不返回
  • Alternate 動畫結束後返回

8、animation-play-state 動畫狀態

  • paused 停止
  • running 運動

9、animation-fill-mode 動畫前後的狀態

  • none 不改變預設行為
  • forwards 當動畫完成後,保持最後一個屬性值(在最後一個關鍵幀中定義)
  • backwards 在 animation-delay 所指定的一段時間內,在動畫顯示之前,應用開始屬性值(在第一個關鍵幀中定義)
  • both 向前和向後填充模式都被應用

10、animation:name duration timing-function delay iteration-count direction;同時設定多個屬性

舉例:(人物走路動畫)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>走路動畫</title>
    <style type="text/css">        
        .box{
            width:120px;
            height:180px;
            border:1px solid #ccc;            
            margin:50px auto 0;
            position:relative;
            overflow:hidden;            
        }

        .box img{
            display:block;
            width:960px;
            height:182px;
            position: absolute;
            left:0;
            top:0;
            animation:walking 1.0s steps(8) infinite;            
        }
        @keyframes walking{
            from{
                left:0px;
            }

            to{
                left:-960px;
            }
        }
    </style>
</head>
<body>
    <div class="box"><img src="images/walking.png"></div>
</body>
</html>

動畫中使用的圖片如下:

示例圖片