CSS3中Transition動畫屬性用法詳解-css教學-PHP中文網

首頁

web前端

css教學

CSS3中Transition動畫屬性用法詳解

高洛峰

Mar 08, 2017 pm 01:27 PM

W3C標準中對css3的transition這是樣描述的：「css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠點擊、獲得焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。 •transition-property：指定對HTML元素的哪個css屬性進行過渡漸變處理，這個屬性可以是color、width、height等各種標準的css屬性。
•transition-duration：指定屬性過渡的持續時間

•transition-timing-function：指定漸變的速度：

1、ease：（逐漸變慢）預設值，ease函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0); 2、linear：（勻速），linear 函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0); 3、ease-in： (加速)，ease-in 函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)；

4、ease-out：（減速），ease-out 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0)；

5、ease-in-out：（加速然後減速），ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0);
6 、cubic-bezier：（該值允許你去自訂一個時間曲線），特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值是特定於曲線上點P1和點P2。所有數值需在[0, 1]區域內，否則無效。
•transition-delay：指定延遲時間，也就是經過多久才開始執行過渡過程。

瀏覽器相容性

Internet Explorer 9 以及更早的版本，不支援 transition 屬性。

Internet Explorer 10, Firefox, Opera 和 Chrome支援transition 屬性。 Chrome 25 以及更早的版本以及Safari 需要前綴 -webkit-。
下面還是以實例來說明transition的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition演示1</title>
    <style type="text/css">
        .animated_p {   
            margin: 100px auto;   
            width:100px;   
            height:60px;   
            background:#92B901;   
            /*简写属性*/   
            -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; /* Safari */   
            /*每个属性分开写*/   
            transition-property:width,height,transform,background,opacity;   
            transition-duration:1s,1s,1s,1s,1s,1s;   
            -webkit-border-radius:5px;   
            border-radius:5px;   
            opacity:0.4;   
        }   
        .animated_p:hover {   
            -moz-transform: rotate(360deg);   
            -webkit-transform: rotate(360deg);   
            -o-transform: rotate(360deg);   
            transform: rotate(360deg);   
            opacity:1;   
            background:#1ec7e6;   
            width:200px;   
            height:120px;   
        }   
    </style>
</head>
<body>
<p class="animated_p"></p>
</body>
</html>

登入後複製

上述程式碼當滑鼠移到p上時，CSS屬性：width,height,transform,background,opacity都發生漸變過渡效果。最終css樣式變成.animated_p裡定義的樣式，過渡過程大致如下：

再給一個網上的嫦娥奔月的範例，要求：當滑鼠移到圖片上時，嫦娥出現，移開時嫦娥消失

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>transition演示2</title>
    <style type="text/css">
        body{   
          color: #fff;   
          background:#000;   
        }   
        .change{   
          display:block;   
          width:400px;   
          height:400px;   
          background:url(http://www.php.cn/) no-repeat center;   
          background-size:cover;   
          border:1em solid rgba(255,255,255,.8);   
          margin:50px auto;   
        }   
        .change img{   
          display:block;   
          width:300px;   
          height:284px;   
          opacity:0;   
          -webkit-transform:translate(-100px,-100px);   
          transform:translate(-100px,-100px);   
          -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out;   
          transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out;   
        }   
        .change:hover img{   
          -webkit-transform:translate(0px,0px);   
          transform:translate(0px,0px);   
          opacity:1;   
        }   
    </style>
</head>
<body>
    <a href="http://image.haosou.com/i?q=%E5%AB%A6%E5%A8%A5png&src=tab_www" class="change " target="_blank">
        <img src="http://p4.qhimg.com/t0160e6a92121691e22.png" alt="" />
    </a>
</body>
</html>

登入後複製

為了使嫦娥有飄入飄出的效果，設定了transform屬性，配合opacity，加入過渡效果就能達到效果： CSS3中Transition动画属性用法详解