animation 動畫鋪墊
animation 動畫
columns 多列布局
transform 可以實現元素的形狀、角度、位置等的變化。
值： rotate(); 以x/y/z為軸進行旋轉，預設為z
rotatex(), rotatey(), rotatez(), rotate3d(x, y, z, angle) x, y, z —>
scale(); 以x/y為軸進行縮放
scale(x, y) 接受兩個值，如果第二引數未提供，則第二個引數使用第乙個引數的值
scalex(),scaley() 值是數字表示倍數，不加任何單位
scalez()
scale3d() scale3d(sx,sy,sz)
skew(); 對元素進行傾斜扭曲
skew(x, y);接受兩個值，第乙個引數對應x軸，第二個引數對應y軸。如果第二個引數未提供，則預設值為0
skewx(), skewy()
translate(); 可以移動距離,相對於自身位置。
translate(x, [y])
translatex(),translatey(),translatez(),translate3d(x, y, z)
任何乙個元素都有乙個中心點，
預設情況下，其中心點是居於元素x軸和y軸的50%處
取值如下
transition 屬性是css3的乙個復合屬性，主要包括一下幾個子屬性
屬性介紹
transition-property
指定過渡或動態模擬的css屬性
transition-duration
指定過渡所需要的時間
transition-timing-function
指定過渡函式
transition-delay
指定開始出現的延遲時間
屬性介紹
linear
規定相同速度開始至結束的過度結果（等於cubic-bezier()0,0,1,1）
ease
規定慢速開始。然後變快。然後變慢速結束的過度結果（等於cubic-bezier()0.25,0.1,0.25,1）
ease-in
規定以慢速開始的過度結果（等於cubic-bezier()0,0,1,1）
easy-out
規定以慢速結束的過度效果
ease-in-out
規定以慢速開始和結束的
cubic-bezier(n,n,n,n)
在cubic-bezier函式中定義自己的值。可能的值是0至1之間的數值
貝塞爾曲線
在animation和transition兩個屬性中，cubic-bezier是控制變化的速度曲線，下面我們來了解下什麼是cubic-bezier。
cubic-bezier稱為三次貝塞爾曲線，主要是生成速度曲線的函式，規定是cubic-bezier(,,,)
animation 動畫會按照keyframes 關鍵幀裡面指定的幀狀態而過渡執行。
0% - 100% 代表動畫的時間過渡
@keyframes demomove
10%20%
50%100%
}
animation 屬性為css3的復合屬性，主要包括以下子屬性
屬性介紹
值animation-name
此屬性為執行動畫的 keyframe 名
animation-duration
此屬性為動畫執行的時間
animation-timing-function
指定過渡函式速率
animation-delay
執行延遲時間
animation-direction
normal/reverse/alternate/alternate-reverse;
animation-iteration-count
infinite/number;
animation-fill-mode
forwards/backwards/both/none;
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode
屬性定義在動畫開始之前和結束之後發生的操作。主要具有四個屬性值
none:預設值，表示動畫將按預期進行和結束，在動畫完成其最後一幀時，動畫會反轉到初始幀處、forwards:表示動畫在結束後繼續應用最後的關鍵幀的位置、backwards: 會在向元素應用動畫樣式時迅速應用動畫的初始幀（結合延遲1s來看）、both:元素動畫同時具有forwards和backwards效果
為了能在web頁面中方便實現類似報紙、雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組（css multi column layout module）。它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上都使用了幾十年了，但要在web頁面上實現這樣的效果還是有相當大的難度，慶幸的是，css3的多列布局可以輕鬆實現。
語法：
columns: [column-width] [column-count];
屬性介紹
column-width
指每一列的寬度 根據容器寬度自適應 （最小寬度）
column-count
指規定的列數 唯一精準的是列數
column-gap
設定列與列之間的寬度，直接用數值表示即可(eg:10px)
column-gap
主要用來設定列與列之間的間距 如果沒有顯示設定column-gap值時，其值大小會根據瀏覽器預設的font-size來定
但column-rule是不占用任何空間位置的，在列與列之間改變其寬度不會改變任何列的位置。
屬性介紹
column-rule-width寬度
屬性介紹
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屬性
column-span: 1/all
設定多列布局元素內的子元素，可以跨列，類似標題效果。即乙個新聞標題要橫跨所有內容列。注：此屬性要在子元素上設定。
CSS基礎 CSS3動畫
通過css3動畫屬性，我們可以建立動畫，實現簡單的動畫效果。css3動畫的實現需要用到animation屬性並配合關鍵幀 keyframes 使用。1.對需要設定動畫的元素新增animation屬性。2.設定關鍵幀 keyframes animation是所有動畫屬性的簡寫屬性，除了 animati...
CSS3動畫 keyframes基礎
動畫的本質是快速切換大量時在人腦中形成的具有連續性的畫面，我們將形成連續性畫面的任意一張稱為楨或動畫幀，它是構成動畫的最小單元，css 中專門提供了建立動畫幀的屬性，並以此為基礎在網頁中建立動畫。keyframes是 css 中提供的專門用於定義動畫關鍵幀的語法詞 關鍵幀序列 keyframes m...
css3動畫基礎語法01
一，動畫的使用必須要準備 1，準備動畫 keyframes關鍵字定義 2，需要為想要使用動畫的dom元素 新增一系列的動畫屬性。1，定義動畫 keyframes toright to 2，準備class 內部定義了動畫的各種效果 animation 動畫屬性的符合寫法 animation oneli...