十天精通CSS3學習筆記 part4

CSS3中的變形與動畫（下）

 

CSS3 Keyframes介紹

 Keyframes 被稱爲關鍵幀，其相似於Flash中的關鍵幀。在CSS3中其主要以「@keyframes」開頭，後面緊跟着是動畫名稱加上一對花括號「{…}」，括號中就是一些不一樣時間段樣式規則。

@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}

在一個「@keyframes」中的樣式規則能夠由多個百分比構成的，如在「0%」到「100%」之間建立更多個百分比，分別給每一個百分比中給須要有動畫效果的元素加上不一樣的樣式，從而達到一種在不斷變化的效果。

經驗與技巧：在@keyframes中定義動畫名稱時，其中0%和100%還可使用關鍵詞from和to來表明，其中0%對應的是from，100%對應的是to。

瀏覽器的支持狀況：

 

Chrome 和 Safari 須要前綴 -webkit-；Foxfire 須要前綴 -moz-。

案例演示

經過「@keyframes」聲明一個名叫「wobble」的動畫，從「0%」開始到「100%」結束，同時還經歷了一個「40%」和「60%」兩個過程。「wobble」動畫在「0%」時元素定位到left爲100px，背景色爲green，而後在「40%」時元素過渡到left爲150px,背景色爲orange,接着在「60%」時元素過渡到left爲75px，背景色爲blue，最後「100%」時結束動畫，元素又回到起點left爲100px處，背景色變爲red。

HTML:

<div>鼠標放到我身上</div>

CSS:

@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;
  }
}
div {
  width: 100px;
  height: 100px;
  background:red;
  color: #fff;
}
div:hover{
  animation: wobble 5s ease .1s;
}

CSS3中調用動畫

animation-name屬性主要是用來調用 @keyframes 定義好的動畫。須要特別注意: animation-name 調用的動畫名須要和「@keyframes」定義的動畫名稱徹底一致（區分大小寫），若是不一致將不具備任何動畫效果。

語法：

animation-name: none | IDENT[,none|DENT]*;

一、IDENT是由 @keyframes 建立的動畫名，上面已經講過了（animation-name 調用的動畫名須要和「@keyframes」定義的動畫名稱徹底一致）；

二、none爲默認值，當值爲 none 時，將沒有任何動畫效果,這能夠用於覆蓋任何動畫。

注意：須要在 Chrome 和 Safari 上面的基礎上加上-webkit-前綴，Firefox加上-moz-。

CSS3中設置動畫播放時間

animation-duration主要用來設置CSS3動畫播放時間，其使用方法和transition-duration相似，是用來指定元素播放動畫所持續的時間長，也就是完成從0%到100%一次動畫所需時間。單位：S秒

語法規則

animation-duration: <time>[,<time>]*

CSS3中設置動畫播放方式

animation-timing-function屬性主要用來設置動畫播放方式。主要讓元素根據時間的推動來改變屬性值的變換速率，簡單點說就是動畫的播放方式。

語法規則：

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

它和transition中的transition-timing-function同樣，具備如下幾種變換方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。對應功以下：

在調用move動畫播放中，讓元素樣式從初始狀態到終止狀態時，先加速再減速，也就是漸顯漸隱效果。

CSS3中設置動畫開始播放的時間

animation-delay屬性用來定義動畫開始播放的時間，用來觸發動畫播放的時間點。和transition-delay屬性同樣，用於定義在瀏覽器開始執行動畫以前等待的時間。

語法規則：

animation-delay:<time>[,<time>]*

CSS3中設置動畫播放次數

animation-iteration-count屬性主要用來定義動畫的播放次數。

語法規則：

animation-iteration-count: infinite | <number> [, infinite | <number>]*

一、其值一般爲整數，但也可使用帶有小數的數字，其默認值爲1，這意味着動畫將從開始到結束只播放一次。

二、若是取值爲infinite，動畫將會無限次的播放。

CSS3中設置動畫播放方向

animation-direction屬性主要用來設置動畫播放方向，其語法規則以下：

animation-direction:normal | alternate [, normal | alternate]*

其主要有兩個值：normal、alternate

一、normal是默認值，若是設置爲normal時，動畫的每次循環都是向前播放；

二、另外一個值是alternate，他的做用是，動畫播放在第奇數次向前播放，第偶數次向反方向播放。

例如：經過animation-direction屬性，將move動畫播放動畫方向設置爲alternate，代碼爲：

animation-direction:alternate;

CSS3中設置動畫的播放狀態

animation-play-state屬性主要用來控制元素動畫的播放狀態。

參數：

其主要有兩個值：running和paused。

其中running是其默認值，主要做用就是相似於音樂播放器同樣，能夠經過paused將正在播放的動畫停下來，也能夠經過running將暫停的動畫從新播放，這裏的從新播放不必定是從元素動畫的開始播放，而是從暫停的那個位置開始播放。另外若是暫停了動畫的播放，元素的樣式將回到最原始設置狀態。

例如，頁面加載時，動畫不播放。代碼以下：

animation-play-state:paused;

CSS3中設置動畫時間外屬性

animation-fill-mode屬性定義在動畫開始以前和結束以後發生的操做。主要具備四個屬性值：none、forwards、backwords和both。其四個屬性值對應效果以下：

屬性值	效果
none	默認值，表示動畫將按預期進行和結束，在動畫完成其最後一幀時，動畫會反轉到初始幀處
forwards	表示動畫在結束後繼續應用最後的關鍵幀的位置
backwards	會在向元素應用動畫樣式時迅速應用動畫的初始幀
both	元素動畫同時具備forwards和backwards效果

在默認狀況之下，動畫不會影響它的關鍵幀以外的屬性，使用animation-fill-mode屬性能夠修改動畫的默認行爲。簡單的說就是告訴動畫在第一關鍵幀上等待動畫開始，或者在動畫結束時停在最後一個關鍵幀上而不回到動畫的第一幀上。或者同時具備這兩個效果。

例如：讓動畫停在最一幀處。代碼以下：

 animation-fill-mode:forwards; 

• 第10章 佈局樣式相關

爲了能在Web頁面中方便實現相似報紙、雜誌那種多列排版的佈局，W3C特地給CSS3增長了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面，這種佈局在報紙和雜誌上都使用了幾十年了，但要在Web頁面上實現這樣的效果仍是有至關大的難度，慶幸的是，CSS3的多列布局能夠輕鬆實現。接下來我們一塊兒學習多列布局相關的知識。

 

語法：

columns：<column-width> || <column-count>

多列布局columns屬性參數主要就兩個屬性參數：列寬和列數。

參數	參數說明
<column-width>	主要用來定義多列中每列的寬度
<column-count>	主要用來定義多列中的列數

舉例：要顯示2欄顯示，每欄寬度爲200px，代碼爲：

columns: 200px 2;

到目前爲止大部分主流瀏覽器都對其支持：

CSS3 多列布局——column-count

column-count屬性主要用來給元素指定想要的列數和容許的最大列數。其語法規則：

column-count：auto | <integer>

取值說明：

屬性值	屬性值說明
auto	此值爲column-count的默認值，表示元素只有一列，其主要依靠瀏覽器計算自動設置。
<integer>	此值爲正整數值，主要用來定義元素的列數，取值爲大於0的整數，負值無效。

 例如：將列分紅四列顯示，代碼以下：

column-count:4;

CSS3 多列布局——column-width

column-width的使用和CSS中的width屬性同樣，不過不一樣的是，column-width屬性在定義元素列寬的時候，既能夠單獨使用，也能夠和多列屬性中其餘屬性配合使用。其基本語法以下所示 ：

column-width: auto | <length>

取值說明：

屬性值	說明
auto	若是column-width設置值爲auto或者沒有顯式的設置值時，元素多列的列寬將由其餘屬性來決定，好比前面的示例就是由列數column-count來決定。
<length>	使用固定值來設置元素列的寬度，其主要是由數值和長度單位組成，不過其值只能是正值，不能爲負值。

CSS3 列間距column-gap

column-gap主要用來設置列與列之間的間距，其語法規則以下：

column-gap: normal || <length>

取值說明

屬性值	屬性值說明
normal	默認值，默值爲1em（若是你的字號是px，其默認值爲你的font-size值）。
<length>	此值用來設置列與列之間的距離，其可使用px,em單位的任何整數值，但不能是負值。

例如：將內容分三列顯列，列與列之間的間距爲2em，實現代碼爲：

column-count: 3;
column-gap: 2em;

CSS3 列表邊框column-rule

column-rule主要是用來定義列與列之間的邊框寬度、邊框樣式和邊框顏色。簡單點說，就有點相似於經常使用的border屬性。但column-rule是不佔用任何空間位置的，在列與列之間改變其寬度不會改變任何列的位置。

語法規則：

column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>

取值說明：

屬性值	屬性值說明
column-rule-width	相似於border-width屬性，主要用來定義列邊框的寬度，其默認值爲「medium」，column-rule-width屬性接受任意浮點數，但不接收負值。但也像border-width屬性同樣，可使用關鍵詞：medium、thick和thin。
column-rule-style	相似於border-style屬性，主要用來定義列邊框樣式，其默認值爲「none」。column-rule-style屬性值與border-style屬值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
column-rule-color	相似於border-color屬性，主要用來定義列邊框顏色，其默認值爲前景色color的值，使用時至關於border-color。column-rule-color接受全部的顏色。若是不但願顯示顏色，也能夠將其設置爲transparent(透明色)

例如：爲了能有效區分欄目列之間的關係，能夠爲其設置一個列邊框，代碼爲：

column-rule: 2px dotted green;

CSS3 跨列設置column-span

column-span主要用來定義一個分列元素中的子元素能跨列多少。column-width、column-count等屬性能讓一元素分紅多列，無論裏面元素如何排放順序，他們都是從左向右的放置內容，但有時咱們須要基中一段內容或一個標題不進行分列，也就是橫跨全部列，此時column-span就能夠輕鬆實現，此屬性的語法以下：

column-span: none | all

取值說明

屬性值	屬性值說明
none	此值爲column-span的默認值，表示不跨越任何列。
all	這個值跟none值恰好相反，表示的是元素跨越全部列，並定位在列的Ｚ軸之上。

例如：將第一個標題跨越全部列，代碼：

column-span:all;

效果以下：