首頁 > web前端 > css教學 > 主體

CSS3中Transition動畫屬性的用法介紹

不言
發布: 2018-06-28 14:29:48
原創
1995 人瀏覽過

這篇文章主要為大家詳細介紹了CSS3中Transition動畫屬性用法,教大家如何使用Transition動畫,有興趣的小夥伴們可以參考一下

W3C標準中對css3的transition這是樣描述的:「css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠點擊、獲得焦點、被點擊或對元素任何改變中觸發,並圓滑地以動畫效果改變CSS的屬性值。」

transition屬性的值包括以下四個:

 •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://p3.qhimg.com/t0134c65e59012a1257.png) 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屬性,加入過渡效果就能達到效果:

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

CSS3實現的10種Loading效果

CSS3中的Transition過度與Animation動畫屬性的使用介紹

#

以上是CSS3中Transition動畫屬性的用法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!