CSS3 Transitions, Transforms和Animation使用簡介與應用展現

時間 2019-11-11

標籤 css3 css transitions transforms animation 使用簡介應用展現欄目 CSS 简体版

原文原文鏈接

1、前言兼目錄索引

《天龍八部》裏的虛竹小和尚以前能夠說是和尚的先進人物與表明模範，各種清規戒律謹記與嚴守。可是，後來呢，花姑娘送到跟前，什麼戒律都成了浮雲，禁不住誘惑享樂去了。啊，我如今彷佛有相似的感受，原本不打算深究CSS3的一些屬性的，可是其效果以及實際應用價值之誘惑實在巨大，仍是抵擋不住，折騰下了這篇文章。勞民傷財的工程越少越好，因此，這裏乾脆把CSS3 動畫相關的幾個屬性湊合到一塊兒了，這樣，至少一年半載內不會再寫相關的文章了。css

CSS3動畫相關的幾個屬性是：transition, transform, animation；我分別理解爲過渡，變換，動畫。雖意義相近，但具體角色不一。就像是SHE組合，雖然都是三個女生，都唱同一首歌，但有負責高音，和擅長低音的，具體工做於角色仍是有差別的。//zxx:貌似那個誰誰燒傷了，真是不幸~~html

transition指過渡啦，就是從a點都b點，就像過江坐渡輪，是有時間的，是連續的，通常針對常規CSS屬性；transform指變換，就那幾個固定的屬性：旋轉啦，縮放啦，偏移啦什麼的，與獨立於遠房親戚transition使用，可是，效果就是很乾澀機械的旋轉移動。要是配合transition屬性，旋轉啊什麼的，就會很平滑。animation最早安家於Safari瀏覽器，自成一家，與transition和transform有老死不相往來之感，可是要說單挑的話，animation要比transition厲害些。css3

目錄索引
1. 話說Transitions這廝
 2. 話說Transforms這貨
 3. 話說Animation這物
 4. 更實際綜合的效果展現
 5. 瀏覽器支持狀況
 6. 參考文章及延伸閱讀
 7. 結語這東西web

2、話說Transitions這廝

CSS3 transition屬性早在去年個人「CSS3 transition實現超酷圖片牆動畫效果」一文中就有過介紹。其做用是：平滑的改變CSS的值。不管是點擊事件，焦點事件，仍是鼠標hover，只要值改變了，就是平滑的，就是動畫。因而乎，只要一個整站通用的class，就能夠很輕鬆的漸進加強地實現動畫效果，超有實用價值的說。瀏覽器

transition有下面些具體屬性：wordpress

transition-property :* //指定過渡的性質，好比transition-property:backgrond 就是指backgound參與這個過渡
transition-duration:*//指定這個過渡的持續時間
transition-delay:* //延遲過渡時間
transition-timing-function:*//指定過渡類型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier性能

例以下面這個很簡單的例子：動畫

.trans {
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
}
.trans:hover {
    background-color: #486AAA;
    color: #fff;
}

結果在Safari或是Chrome瀏覽器下能夠看到以下效果：
this

若是你正在使用或有webkit核心的瀏覽器，您可能狠狠地點擊這裏：webkit內核瀏覽器下背景色過渡demospa

就跟CSS2的background屬性同樣，平時咱們都不會像上面同樣，把transition的屬性一個一個攤開寫，而是合併。

仍是上面的例子，咱們將transition屬性合併，並擴展幾個瀏覽器，以下CSS代碼：

.trans {
    ...
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
.trans:hover {
    background-color: #486AAA;
    color: #fff;
}

以下HTML代碼：

<a href="/" class="trans">通過我~~</a>

結果以下截圖（截自Opera 10.6瀏覽器）：

transition中的transition-timing-function屬性讓人心存芥蒂，其一堆ease相關的值（linear | ease-in | ease-out | ease-in-out | cubic-bezier），不太容易讓人理解與記住。尤爲其中cubic-bezier就是指貝塞爾曲線，與複雜的數學扯上的關係，不由勾起了高中時數學的夢魘。

其實呢，理一理，也還好。首先cubic-bezier這個基本上就不用鳥了，99%的狀況都用不到這個東西，因此，可貴悠閒，直接pass掉。linear很好記，線性嘛。至於ease-in | ease-out | ease-in-out，就是指緩動效果啦，說白了就是指開始時候慢慢動呢仍是結束的時候慢慢動。那麼in和out那個先慢慢動呢？啊，咱們能夠聯想記憶，很好記的。咱們都知道OOXX吧，ease-in中的in就表示進入，進入的時候顯然一開始都是慢的，等瞄準就緒後才能快速衝刺進入，因而ease-in表示先慢後快；ease-out其out表示出來，出來確定是先快後慢的，由於出來時臨近洞口速度確定要降下來，省得跑出來亂了節奏，因而ease-out表示先快後慢；最後，很好理解的，ease-in-out表示一進一出，也就是先慢後快再慢。

有些純潔的人可能不太明白上面邪惡的文字表示的含義，不要緊，咱們能夠看圖說話，下面截自不一樣運動曲線下同一時間的截圖，從中能夠看到哪一個先快，哪一個先慢（注意：最後都是同時到達）：

要是你以爲上面的靜態的截圖表意不夠具體，您能夠狠狠地點擊這裏：不一樣緩動類效果demo(Opera/Chrome/Safari)

您能夠觀察方塊的運動規律，知道不一樣緩動名稱的效果是如何的。

以上就是transition的簡單介紹，要查看更詳細更權威的信息，能夠去官方頁面查看。

3、話說transform這貨

transform指變換，使用過photoshop的人應該知道里面的Ctrl+T自由變換。transform就是指的這個東西，拉伸，壓縮，旋轉，偏移。見下面示例代碼：

.trans_skew { transform: skew(35deg); }
.trans_scale { transform:scale(1, 0.5); }
.trans_rotate { transform:rotate(45deg); }
.trans_translate { transform:translate(10px, 20px); }

結果就有相似下面的些效果：

您能夠狠狠地點擊這裏：transform些屬性效果demo

transform屬性要是加上transition的過渡特性，那可就是如虎添翼，櫻木花道配上流川楓啊，能夠產生很多美妙的火花，例以下面這個例子，關鍵代碼以下：

.trans_effect {
    -webkit-transition:all 2s ease-in-out;
    -moz-transition:all 2s ease-in-out;
    -o-transition:all 2s ease-in-out;
    -ms-transition:all 2s ease-in-out;    
    transition:all 2s ease-in-out;
}
.trans_effect:hover {
    -webkit-transform:rotate(720deg) scale(2,2);
    -moz-transform:rotate(720deg) scale(2,2);
    -o-transform:rotate(720deg) scale(2,2);
    -ms-transform:rotate(720deg) scale(2,2);
    transform:rotate(720deg) scale(2,2);        
}

結果在Chrome預計Safari瀏覽器下就有了祖瑪裏面青蛙掛掉時的縮放旋轉效果了：

鼠標通過時：

若是你手上有webkit核心的瀏覽器，能夠狠狠地點擊這裏：酷酷的縮放旋轉動畫demo

transform還支持3D變換，怎一酷字了得。因爲某些不可告人的緣由，這裏就不展現了。故，transform部分到此結束。

4、話說animations這物

截止2010年11月份，animations這物彷佛仍是隻在webkit核心的瀏覽器上起做用，因此本段落的一些demo效果，需在webkit核心瀏覽器下查看，不在重複贅述。

animations的介紹以實例驅動。先看簡單的縮放擴展動畫實例：
您能夠狠狠地點擊這裏：animations水平彈性縮放變色動畫

效果大體以下，默認是個很規矩很安靜的矩形框：

鼠標移上去後顯示慢慢的寬度增長，而後忽然快速的寬度增長，同時背景色加深，下爲動畫過程當中的截圖：

關鍵的CSS代碼以下：

@-webkit-keyframes resize {
    0% {
        padding: 0;
    }
    50% {
        padding: 0 20px;
        background-color:rgba(190, 206, 235, 0.2);        
    }
    100% {
        padding: 0 100px;
        background-color:rgba(190, 206, 235, 0.9);
    }
}
.anim_box:hover {
    -webkit-animation-name: resize;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 4;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
}

此例子中，鼠標懸停時動畫只執行4次。

animations不只適用於CSS2中的屬性，CSS3也是支持的，例如box-shadow盒陰影效果，因此，咱們能夠實現外發光效果的。使用過web qq的人應該有印象，當鼠標移到聊天對象腦殼上的時候會有藍色外發光的動畫，可是那是gif動畫圖片實現的（如今自動跳轉到web qq 2.0已看不到效果）。gif動畫實現的效果相似於下面（很兼容）：

摸左邊張含韻

可是gif的重用性有限並且製做破費功夫，若是簡單幾行CSS代碼就能夠實現高性能高擴展的效果豈不更加，如今animations就能夠搞定這一些。

您能夠狠狠地點擊這裏：animations下的外發光動畫demo

發光效果以下：

主要的CSS代碼以下：

@-webkit-keyframes glow {
    0% {
        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);
        border-color: rgba(160, 179, 214, 0.5);         
    }
    100% {
        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 1.0), 0 0 18px rgba(0, 140, 255, 1.0);
        border-color: rgba(160, 179, 214, 1.0); 
    }
}
.anim_image {
    padding:3px;
    border:1px solid #beceeb;
    background-color:white;
    -moz-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
    -webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
    box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
}
.anim_image:hover {
    background-color:#f0f3f9;
    -webkit-animation-name: glow;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;    
}

animation展現結束，的說~~

5、更實際綜合的效果展現

首先，鼠標懸停的淡入淡出效果。

您能夠狠狠地點擊這裏：鼠標懸停的淡入淡出demo

目前，非webkit核心瀏覽器下面，鼠標懸停僅僅是透明與不透明，只有在webkit核心瀏覽器下面纔有平滑的動畫效果，以下圖：

相關主要CSS代碼以下：

.anim_fade_image {
    position:absolute;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.anim_fade_image:hover, .anim_fade_image_hover {
    opacity:0;
    filter: alpha(opacity=0);
}

固然，咱們也能夠輔助JavaScript，添加點擊圖片淡出淡出。JavaScript負責的只是終了的透明度值，中間的動畫直接交給CSS就能夠了。

您能夠狠狠地點擊這裏：點擊下的淡入淡出demo

效果相似，就不展現截圖了，代碼相似，就不展現代碼了。

固然，咱們還能夠作些小動畫，讓圖片自動淡入淡出的播放，不停地播放。要不停播放只要將animation-iteration-count設爲infinite(無限)就ok的啦。因而，咱們修改下CSS代碼，以下：

@-webkit-keyframes fadeInOut {
    0% {
        opacity:1;
     }
    25% {
        opacity:0;
    }
    50% {
        opacity: 0;    
    }
    75% {
        opacity:1;
    }
}
.anim_fade_image {
    position:absolute;    
    -webkit-animation-name: fadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 12s;
    -webkit-animation-direction: alternate;
}

因而乎，圖片就稀裏糊塗的不停地淡入淡出了。您有興趣能夠狠狠地點擊這裏：圖片無限自動fade效果demo

以上些效果都是與透明度打交道的。下面這個實例是與圖片位置，比例尺寸掛鉤的，聰明的你是否是想到了transform屬性呢。對的，transform+tranisition，雙劍合璧，天下無敵。下面這個效果是很酷很酷的，之前基本上只能在Flash中能夠看到。噹噹噹當，您能夠狠狠地點擊這裏：圖片輪轉縮放顯示動畫demo（鼠標通過圖片有驚喜的說，非webkit繞道，搜狗等瀏覽器可切換到高速模式亦可）。

效果截圖以下，爲動畫過程當中：

相關的核心的CSS代碼以下：

.anim_image {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    cursor:pointer;
}
.anim_image_top {
    position: absolute;
    -webkit-transform: scale(0, 0);
    opacity: 0;
    filter: Alpha(opacity=0);
}
.anim_box:hover .anim_image_top , .anim_box_hover .anim_image_top {
    opacity: 1;
    filter: Alpha(opacity=100);
    -webkit-transform: scale(1, 1);
    -webkit-transform-origin: top right;        
}
.anim_box:hover .anim_image_bottom, .anim_box_hover .anim_image_bottom {
    -webkit-transform: scale(0, 0);
    -webkit-transform-origin: bottom left;
}

HTML代碼以下：

<div id="testBox" class="anim_box">
    <img class="anim_image anim_image_top" data-src="http://image.zhangxinxu.com/image/study/p/s200/ps6.jpg" />
    <img class="anim_image anim_image_bottom" data-src="http://image.zhangxinxu.com/image/study/p/s200/ps4.jpg" />
</div>

固然，這裏應用transform的旋轉，水平垂直縮放效果也是很讚的，以下圖所示：

您能夠狠狠地點擊這裏：圖片旋轉切換動畫demo

CSS代碼與上面的例子大同小異，這裏就不展現了，您能夠去demo頁面查看。

下面，展現的是更加實際更加靠譜的例子，選項卡切換。
咱們平時的選項卡切換基本上都是很生硬的，直接啪啪啪，切換過來了，沒有點過渡啊什麼的（畢竟寫JavaScript動畫成本較高），如今，有了transitions，實現過渡效果就是幾行CSS代碼的事情，很少說了，直接上實例。

您能夠狠狠地點擊這裏：平滑選項卡切換demo

在demo中，點擊下面的幾個圖片文字按鈕狀的東西，就能夠看到圖片水平滑過來，再滑過去，再滑過來，讓人愛不釋手啊。下圖爲截圖：

CSS其做用的就是那個值以all開頭的transition屬性，以下：

.trans_image_box {
    width: 2000px;
    height: 300px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

transitionCSS代碼組很吃得開的。

只要是CSS值變換的，只要是額外有transition屬性設置的，都是平滑效果，都是動畫。因此，咱們看看如何以動畫形式實現經典的手風琴切換效果。

您能夠狠狠地點擊這裏：手風琴效果demo（點擊水平標題有驚喜）

下爲截圖：

其中JavaScript扮演的角色只是變變高度值而已，動畫，都是CSS一人挑大樑完成的，很贊吧。下面的代碼就是動畫效果那段div上的CSS代碼：

.acco_content {
    height:0;
    padding:0 10px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    overflow:hidden;
}

JavaScript的做用不過是變變高度而已：

$$(".acco_title").click(function() {
    var rel = this.lang, cl = this.className, oOn = $$(".acco_title_on")[0], rel_on = oOn.lang;
    if (!/on/.test(cl) && rel && rel_on) {
        $$("#" + rel)[0].style.height = "140px";
        $$("#" + rel_on)[0].style.height = "0";
        this.className = "acco_title acco_title_on";
        oOn.className = "acco_title";
    }
});