css3動畫屬性詳解之transform、transition、animation

Riddler 發(fā)布于2019-08-30 12:46 / 2107人閱讀

摘要：動畫屬性詳解關于制作動畫的幾個屬性變形轉換和動畫。一屬性旋轉中心為原點扭曲傾斜縮放移動矩陣變形。各個屬性的用法旋轉其中表示度。承載動畫的另一個屬性。定義動畫的名稱。一個或多個合法的樣式屬性。

css3動畫屬性詳解：

關于CSS3制作動畫的幾個屬性：變形(transform)、轉換(transition)和動畫(animation)。

一、transform 屬性：

旋轉rotate（中心為原點）
扭曲、傾斜skew（skew(x,y), skewX(x), skewY(y)）
縮放scale（scale(x,y), scaleX(x), scaleY(y)）
移動translate（translateX,translateY）
矩陣變形matrix。

各個屬性的用法：

transform:rotate()：旋轉；其中“10deg”表示“10度”。

    transform: rotate(10deg);

transform:skew()：傾斜；

transform: skew(20deg);

transform:scale()：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，須寫成“2.0”，縮小則為負“-”。

transform: scale(1.5);

transform:translate()：變動，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改個值就行，向左向下位移則為負“-”。

transform: translate(120px,0);

綜合在一起：(效果是動態(tài))

.demo{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
.demo:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}

二、transition

css的transition允許css的屬性值在一定的時間區(qū)間內平滑地過渡。

四個屬性：

transition-property是用來指定當元素其中一個屬性改變時執(zhí)行transition效果，其主要有以下幾個值：none(沒有屬性改變)；all（所有屬性改變）這個也是其默認值；indent（元素屬性名）。當其值為none時，transition馬上停止執(zhí)行，當指定為all時，則元素產生任何屬性值變化時都將執(zhí)行transition效果，ident是可以指定元素的某一個屬性值。

transition-duration是用來指定元素,轉換過程的持續(xù)時間

transition-timing-function:

transition-delay[延遲] ：是用來指定一個動畫開始執(zhí)行的時間，也就是說當改變元素屬性值后多長時間開始執(zhí)行transition效果

綜上所述，相對應的一個示例代碼：

  a {
    transition: background 0.5s ease-in,color 0.3s ease-out;
    transition：transform .4s ease-in-out;
  }

縮略圖實例（原文：Anselm Urban）：http://codepen.io/SitePoint/p...

三、animation（@keyframes規(guī)則）

CSS3中添加的新屬性animation是用來為元素實現(xiàn)動畫效果的，但是animation無法多帶帶擔當起實現(xiàn)動畫的效果。承載動畫的另一個屬性——@keyframes。使用的時候為了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前綴以適應不同的瀏覽器。

創(chuàng)建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。

通過 @keyframes 規(guī)則，您能夠創(chuàng)建動畫。

@keyframes定義一個動畫，并定義具體的動畫效果，比如是放大還是位移等等。

@keyframes 它定義的動畫并不直接執(zhí)行，需要借助animation來運轉。

在動畫過程中，您能夠多次改變這套 CSS 樣式。

以百分比來規(guī)定改變發(fā)生的時間，或者通過關鍵詞 "from" 和 "to"，等價于 0% 和 100%。

百分比是指動畫完成一遍的時間長度的的百分比 ，0% 是動畫的開始時間，50%是動畫完成一半的時間，100% 動畫的結束時間。百分比后面的花括號寫：在動畫執(zhí)行過程中的某時間點要完成的變化。

為了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。

語法

    @keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定義動畫的名稱。
keyframes-selector	必需。定義動畫的名稱。合法的值： 1. 0-100% 2. from（與 0% 相同） 3. to（與 100% 相同）
css-styles	必需。一個或多個合法的 CSS 樣式屬性。

例子1：

名字為gif的@keyframes ，動畫完成需要的總時長為1.4s,剛開始的時候圖片旋轉為0度，動畫完成的時候圖片旋轉360度

.load-border {
    width: 120px;
    height: 120px;
    background: url(../images/loading_icon.png) no-repeat center center;
    -webkit-animation: gif 1.4s infinite linear;
    animation: gif 1.4s infinite linear; 
}
@keyframes gif {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

例子2：

名字為mymove的@keyframes ，動畫完成需要的總時長為1s,剛開始的時候圖片距頂部距離為0px，0.25s后圖片距頂部距離為200px，0.5s后圖片距頂部的距離為100px，以此類推

.img {
    width: 120px;
    height: 120px;
    background: url(../images/icon.png) no-repeat center center;
    -webkit-animation: gif 1.4s infinite linear;
    animation: mymove 1s infinite linear;
}
@keyframes mymove
{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

例子3：

在一個動畫中改變多個 CSS 樣式：

@keyframes mymove
{
    0%   {top:0px; background:red; width:100px;}
    100% {top:200px; background:yellow; width:300px;}
}

GPU云服務器云服務器 css3動畫高性能css3動畫看動畫學算法之:hashtable js原生動畫詳解

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/115057.html

「CSS3 」動畫詳解

摘要：規(guī)定動畫的名稱。規(guī)定動畫是否在下一周期逆向地播放。定義動畫各個階段的狀態(tài)的代碼段。動畫的周期時間。動畫的循環(huán)次數(shù)。動畫完成后，元素保持動畫最后的狀態(tài)。重要提示請不要忘記推薦和收藏搜索動畫詳解 CSS3 提供給了我們非常多的轉換函數(shù)： 2D: translate, rotate, scale, skew. 3D: translate3d, rotate3d, scale3d, skew...

weij 2019-08-28 18:16 評論0 收藏0
CSS3 新特性

摘要：語法說明對象選擇器投影方式軸偏移量軸偏移量模糊半徑陰影擴展半徑陰影顏色內陰影，向右偏移，向下偏移，模糊半徑，陰影縮小屬性的參數(shù)設置取值陰影類型此參數(shù)可選。 CSS3 是最新的 CSS 標準，并且完全向后兼容，不過目前W3C 仍然在對 CSS3 規(guī)范進行開發(fā)，雖然標準的規(guī)范還沒有正式發(fā)布，但是現(xiàn)代瀏覽器已經(jīng)支持相當多的 CSS3 屬性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只...

justjavac 2019-08-29 13:07 評論0 收藏0
css3中的變形（transform）、過渡（transition）、動畫（animation）屬性

摘要：中制作動畫的幾個屬性中的變形過渡動畫。默認值為，為時，表示變化是瞬時的，看不到過渡效果。實現(xiàn)動畫效果主要由兩部分組成通過類似動畫中的幀來聲明一個動畫在屬性中調用關鍵幀聲明的動畫。 css3中制作動畫的幾個屬性：css3中的變形（transform）、過渡（transition）、動畫（animation）。一、 CSS3變形（transform）語法： transform ： no...

waruqi 2019-08-30 10:51 評論0 收藏0
CSS動畫之旋轉魔方輪播

摘要：關于的詳細講解張鑫旭一個基本的立方體就需要結合以上三點屬性來實現(xiàn)。寫完這篇文章后確實感覺自己對方面的知識又熟悉了不少但是前端的主力還是月份又得繼續(xù)深入學習方面的知識嘞本文參考內容關于的詳細講解張鑫旭詳解徹底理解和的區(qū)別的原始出處很久沒有回頭來復習CSS方面的知識了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細鞏固一下CSS3動畫有關的知識點,因為之前只是用過...

leone 2019-08-29 15:10 評論0 收藏0
CSS動畫之旋轉魔方輪播

摘要：關于的詳細講解張鑫旭一個基本的立方體就需要結合以上三點屬性來實現(xiàn)。寫完這篇文章后確實感覺自己對方面的知識又熟悉了不少但是前端的主力還是月份又得繼續(xù)深入學習方面的知識嘞本文參考內容關于的詳細講解張鑫旭詳解徹底理解和的區(qū)別的原始出處很久沒有回頭來復習CSS方面的知識了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細鞏固一下CSS3動畫有關的知識點,因為之前只是用過...

LittleLiByte 2019-08-02 10:18 評論0 收藏0