css筆記——區分css3中的transform transition animation

来源:http://www.cnblogs.com/MonaSong/archive/2016/03/25/5319620.html
-Advertisement-
Play Games

出處:http://blog.csdn.net/dyllove98/article/details/8957232 CSS3中和動畫有關的屬性有三個 transform、 transition 和 animation。下麵來一一說明: transform 從字面來看transform的釋義為改變,使 ...


出處:http://blog.csdn.net/dyllove98/article/details/8957232   CSS3中和動畫有關的屬性有三個  transform、 transition 和 animation。下麵來一一說明:   transform     從字面來看transform的釋義為改變,使…變形;轉換 。這裡我們就可以理解為變形。那都能怎麼變呢? none 表示不進行變換; rotate 旋轉            transform:rotate(20deg) 旋轉角度可以為負數。需要先有transform-origin定義旋轉的基點可為left top center right bottom 或坐標值(50px 70px)。 skew  扭曲             transform:skew(30deg,30deg)  skew(相對x軸傾斜,相對y軸傾斜) scale  縮放             transform:scale(2,3) 橫向放大2倍,縱向放大3倍。如等比放大寫一個參數即可。 translate 移動        transform:translate(50px, 50px); matrix 矩陣變形     基本語法transform: matrix(a, c, b, d, tx, ty);其中a, c, b, d是一個二維矩陣:

 

   ┌     ┐ 
   │ a b │
   │ c d │
   └     ┘
a:X軸縮放比例 b:Y軸傾斜 c:Y軸縮放比例 d:X軸傾斜
 tx, ty就是就是基於X和Y 坐標重新定位元素。其實就是translate (tx,ty)



Transition  

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

transition-property: 執行變換的屬性;
transition- duration:      變換延續的時間:
transition-timing-function:    在延續時間段,變換的速率變化;
transition- delay :變換延遲時間
下麵一一說明這四個屬性:
transition-property

語法:

transition-property : none | all | [ <IDENT> ]

transition-property是用來指定當元素其中一個屬性改變時執行transition效果,其 主要有以下幾個值:none(沒有屬 性改 變);all(所有屬性改變)這個也是其預設值;indent(元素屬性名);當其值為none時,transition馬上停止執行,當指定為all 時,則元素產生任何屬性值變化時都將執行transition效果,ident是可以指定元素的某一個屬性值。其對應的類型如下:

1、color: 通過紅、綠、藍和透明度組件變換(每個數值單獨處理),如:background-color,border-color,color,outline-color等CSS屬性;

2、length:真實的數字,如:word-spacing,width,vertical- align,top,right,bottom,left,padding,outline-width,margin,min-width,min- height,max-width,max-height,line-height,height,border-width,border- spacing,background-position等屬性;

3、percentage:真實的數字,如:word-spacing,width,vertical- align,top,right,bottom,left,min-width,min- height,max-width,max-height,line-height,height,background-position等屬性;

4、integer 離散步驟(整個數字),在真實的數字空間,以及使用floor()轉換為整數時發生,如:outline-offset,z-index等屬性;

5、number真實的(浮點型)數值,如:zoom,opacity,font-weight等屬性;

6、transform list:詳情請參閱:《CSS3 Transform》。

7、rectangle:通過x、 y、 width和height(轉為數值)變換,如:crop;

8、visibility:離散步驟,在0到1數字範圍之內,0表示“隱藏”,1表示完全“顯示”,如:visibility;

9、shadow:作用於color、x、y、和blur(模糊)屬性,如:text-shadow;

10、gradient:通過每次停止時的位置和顏色進行變化。它們必須有相同的類型(放射狀的或是線性的)和相同的停止數值以便執行動畫,如:background-image;

11、paint server (SVG):只支持下麵的情況:從gradient到gradient以及color到color,然後工作與上面類似;

12、space-separated list of above:如果列表有相同的項目數值,則列表每一項按照上面的規則進行變化,否則無變化;

13、a shorthand property:如果縮寫的所有部分都可以實現動畫,則會像所有單個屬性變化一樣變化。

支持執行transition效果的屬性:

Property NameType
background-color as color
background-position as repeatable list of simple list of length, percentage, or calc
border-bottom-color as color
border-bottom-width as length
border-left-color as color
border-left-width as length
border-right-color as color
border-right-width as length
border-spacing as simple list of length
border-top-color as color
border-top-width as length
bottom as length, percentage, or calc
clip as rectangle
color as color
font-size as length
font-weight as font weight
height as length, percentage, or calc
left as length, percentage, or calc
letter-spacing as length
line-height as either number or length
margin-bottom as length
margin-left as length
margin-right as length
margin-top as length
max-height as length, percentage, or calc
max-width as length, percentage, or calc
min-height as length, percentage, or calc
min-width as length, percentage, or calc
opacity as number
outline-color as color
outline-width as length
padding-bottom as length
padding-left as length
padding-right as length
padding-top as length
right as length, percentage, or calc
text-indent as length, percentage, or calc
text-shadow as shadow list
top as length, percentage, or calc
vertical-align as length
visibility as visibility
width as length, percentage, or calc
word-spacing as length
z-index as integer
 

 

transition-duration

transition-duration是用來指定元素 轉換過程的持續時間,取值:<time>為數值,單位為s(秒),可以作用於所有元素,包括:before和:after偽元素。其預設值是0,也就是變換時是即時的。  

transition-timing-function

  取值:

transition-timing-function的值允許你根據時間的推進去改變屬性值的變換速率,transition-timing-function有6個可能值:

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]區域內,否則無效。

其是cubic-bezier為通過貝賽爾曲線來計算“轉換”過程中的屬性值,如下曲線所示,通過改變P1(x1, y1)和P2(x2, y2)的坐標可以改變整個過程的Output Percentage。初始預設值為default。

transition-delay

  transition-delay是用來指定一個動畫開始執行的時間,也就是說當改變元素屬性值後多長時間開始執行transition效果,取 值:<time>為數值,單位為s(秒),它的使用和transition-duration極其相似,也可以作用於所有元素,包 括:before和:after偽元素。 預設大小是”0″,也就是變換立即執行,沒有延遲。

有時我們不只改變一個CSS效果的屬性,而是想改變兩個或者多個CSS屬性的transition效果,那麼我們只要把幾個transition的 聲明串 在一起,用逗號(“,”)隔開,然後各自可以有各自不同的延續時間和其時間的速率變換方式。但需要值得註意的一點:transition-delay與 transition-duration的值都是時間,所以要區分它們在連寫中的位置,一般瀏覽器會根據先後順序決定,第一個可以解析為時間的怭值為 transition-duration第二個為transition-delay。如:

   a {transition: background 0.5s ease-in,color 0.3s ease-out}

如果你想給元素執行所有transition效果的屬性,那麼我們還可以利用all屬性值來操作,此時他們共用同樣的延續時間以及速率變換方式,如:

a{transition: all 0.5s ease-in}

}

 

 animation  

顧名思義為動畫的意思。Animation應用在頁面DOM上 使其產生動畫的效果。在開始介紹Animation之前我們有必要先來瞭解一個特殊的東西,那就是"Keyframes",我們把他叫做“關鍵幀”,玩過flash的朋友可能對這個東西並不會陌生。

一個官網的示例:

@-webkit-keyframes 'wobble' {
     0% {
        margin-left: 100px;
        background: green;
     }
     40% {
        margin-left: 150px;
        background: orange;
     }
     60% {
        margin-left: 75px;
        background: blue;
     }
     100% {
        margin-left: 100px;
        background: red;
     }
  }

  

這裡我們定義了一個叫“wobble”的動畫,名字任意取。分幾個階段0% 40% 60% 100% 來過渡。

keyframes定義好了以後,就可以去調用定義好的動畫“wobble”了。

下麵我們來看看怎麼給一個元素調用animation屬性

.demo1 {
     width: 50px;
     height: 50px;
     margin-left: 100px;
     background: blue;
     -webkit-animation-name:'wobble';/*動畫屬性名,也就是我們前面keyframes定義的動畫名*/
     -webkit-animation-duration: 10s;/*動畫持續時間*/
     -webkit-animation-timing-function: ease-in-out; /*動畫頻率,和transition-timing-function是一樣的*/
     -webkit-animation-delay: 2s;/*動畫延遲時間*/
     -webkit-animation-iteration-count: 10;/*定義迴圈資料,infinite為無限次*/
     -webkit-animation-direction: alternate;/*定義動畫方式*/
  }  

animation-name:
animation-name:是用來定義一個動畫的名稱,為Keyframes中的名稱,否則不會有動畫效果。none為預設值,當值為none時,將沒有任何動畫效果。另外我們這個屬性跟前面所講的transition一樣,我們可以同時附幾個animation給一個元素,我們只需要用逗號“,”隔開。

CSS3的animation類似於transition屬性,他們都是隨著時間改變元素的屬性值。他們主要區別是transition需要觸發一 個事件(hover事件或click事件等)才會隨時間改變其css屬性;而animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來 改變元素css的屬性值,從而達到一種動畫的效果。這樣我們就可以直接在一個元素中調用animation的動畫屬性,基於這一點,css3的 animation就需要明確的動畫屬性值,這也就是回到我們上面所說的,我們需要keyframes來定義不同時間的css屬性值,達到元素在不同時間 段變化的效果。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • PS:關於自動外呼的功能我在總體結構篇已經大概說過了,類似資料庫設計、以及相關代碼實現都不難,我就不多贅述了。這裡主要介紹當時遇到的幾個經過仔細思考過的設計思路。這幾天整理的時候,發現當時還是缺乏很多的知識,考慮也沒有很全面。這裡僅僅寫出來,供大家思考。 排隊機制的處理 板卡上的電話通道是有限的(公 ...
  • 類圖分為三層,第一層是類的名稱,如果是抽象類或介面,就用斜體表示,其中介面名稱的上部會用<<interface>>修飾;第二層是類的成員變數,通常是欄位和屬性;第三層是類的成員方法。類的成員變數和成員方法的修飾符分為+、#、-,分別表示public、protected、private。 類之間的關係 ...
  • 簡介 web的優化就是一場阻止http請求最終訪問到資料庫的戰爭。 優化的方式就是 ,在各個節點加緩存。 web請求的流程及節點 熟悉流程及節點,才能定位性能的問題。而且優化的順序一般也是按請求的流程逐一優化。這裡的流程只是做個概要,並不代表全面。 整個流程是以最快的方式讓用戶看到結果 定位的方法 ...
  • 信號的多徑傳播對環境具有依賴性,呈現出非常強的特殊性。對於每個位置而言,該位置上通道的多徑結構是惟一的,終端發射的無線電渡經過反射和折射,產生與周圍環境密切相關的特定模式的多徑信號,這樣的多徑特征可以認為是該位置的“指紋”。基站天線陣列檢測信號的幅度和相位等特性,提取多徑干擾特征參數,將該參數與預先 ...
  • 原地址:http://www.cnblogs.com/BoyXiao/archive/2010/05/07/1729376.html 首先來明確一個問題,那就是在某些情況下,有些對象,我們只需要一個就可以了, 比如,一臺電腦上可以連好幾個印表機,但是這個電腦上的列印程式只能有一個, 這裡就可以通 ...
  • join() 函數 join()函數是將兩個列表連接合併成一個列表。 >>join(10px 20px, 30px 40px) (10px 20px 20px 40px) >>join((blue,red),(#abc,#def)) (#0000ff,#ff0000,#aabbcc,#ddeeff) ...
  • Merge是一個非常有用的功能,類似於Mysql里的insert into on duplicate key. Oracle在9i引入了merge命令, 通過這個merge你能夠在一個SQL語句中對一個表同時執行inserts和updates操作. 當然是update還是insert是依據於你的指定 ...
  • js中不允許出現“ - ” 頁面中改變文字大小-案例: class 點擊按鈕變成覆選框checkbox 改變DIV的浮動 判斷註意事項 所有的相對路徑都別拿來做判斷。。。 img src href="css.css" 絕對路徑可以: img src="http://........jpg" 顏色值不 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...