一、CSS3動畫庫 Animatable
什么是css3動畫?
通過 CSS3，我們能夠創建動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。
CSS3帶來了圓角，半透明，陰影，漸變，多背景圖等新的特征，輕松實現了設計稿中常見的圖層樣式，用簡潔的代碼替代圖片，代替了多余的空標簽。
現成的CSS3動畫庫：http://leaverou.github.io/animatable/
background-color
.background-color { background:#708090; animation:1s ease 0s alternate none infinite background-color;}
@keyframes background-color{
from{ background:#708090;}
to{ background:#000;}
}
1
background-position
background-position 屬性設置背景圖像的起始位置，默認值：0% 0%，效果等同于left top
范例一：
.background-position-1 { background-image: -moz-linear-gradient(-45deg, transparent 25%, black 25%, black 50%, transparent 50%, transparent 75%, black 75%, black); background-size:50px 50px; animation:1s ease 0s alternate none infinite background-position-1;}
@keyframes background-position-1{
from{ background-position:0 0;}
to{ background-position:100% 100%;}
}
1
范例二：
.background-position-2 { background-color: #E04332; background-repeat: repeat-x; background-size: 24px 300px; background-image: linear-gradient(-45deg, slategray 25%, transparent 25%), linear-gradient(45deg, transparent 75%, slategray 75%), linear-gradient(45deg, slategray 25%, transparent 25%), linear-gradient(-45deg, transparent 75%, slategray 75%); animation:1s ease 0s alternate none infinite background-position-2;}
@keyframes background-position-2{
from{ background-position:3px 0, 3px 0, 15px -150px, 15px -150px;}
to{ background-position:3px -70px, 3px -70px, 15px -80px, 15px -80px;}
}
1
background-size
background-size 屬性規定背景圖片的尺寸。在 CSS3 之前，背景圖片的尺寸是由圖片的實際尺寸決定的。在CSS3中，可以規定背景圖片的尺寸，這就允許我們在不同的環境中重復使用背景圖片。
.background-size {background-image: repeating-radial-gradient(transparent, transparent 9px, black 11px, black 20px); background-position:center; animation:1s ease 0s alternate none infinite background-size;}
@keyframes background-size{
from{ background-size:5px 5px;}
to{ background-size:150px 150px;}
}
1
border-radius
border-radius 屬性是一個簡寫屬性，用于設置四個 border-*-radius 屬性。
范例一
.border-radius-1 { animation:1s ease 0s alternate none infinite border-radius-1;}
@keyframes border-radius-1{
from{ border-radius:0;}
to{ border-radius:50%;}
}
1
范例二
.border-radius-2 { animation:1s ease 0s alternate none infinite border-radius-2;}
@keyframes border-radius-2{
from{ border-radius:0 100%;}
to{ border-radius:100% 0;}
}
1
border-width
范例一
.border-width-1 {border-style:solid; border-color: black; animation:1s ease 0s alternate none infinite border-width-1;}
@keyframes border-width-1{
from{ border-width:0;}
to{ border-width:75px;}
}
1
范例二
.border-width-2 {border-style:dashed; border-color: black; animation:1s ease 0s alternate none infinite border-width-2;}
@keyframes border-width-2{
from{ border-width:0;}
to{ border-width:35px;}
}
1
范例三
.border-width-3 {border-style:double; border-color: black; animation:1s ease 0s alternate none infinite border-width-3;}
@keyframes border-width-3{
from{ border-width:0;}
to{ border-width:75px;}
}
1
box-shadow
box-shadow 屬性向框添加一個或多個陰影
范例一
.box-shadow-1 { animation:1s ease 0s alternate none infinite box-shadow-1;}
@keyframes box-shadow-1{
from{ box-shadow:0 0 black;}
to{ box-shadow:0 150px 10px -50px rgba(0,0,0,.5);}
}
1
范例二
.box-shadow-2 { animation:1s ease 0s alternate none infinite box-shadow-2;}
@keyframes box-shadow-2{
from{ box-shadow:none;}
to{ box-shadow:inset -75px -75px 400px #000;}
}
1
范例三
.box-shadow-3 { box-radius: 1px; animation:1s ease 0s alternate none infinite box-shadow-3;}
@keyframes box-shadow-3{
from{ box-shadow:inset 0 0 75px 75px slategray, 0 0 0 slategray;}
to{ box-shadow:inset 0 0 35px 35px transparent, 0 0 75px 50px transparent;}
}
1
color
CSS3 Color屬性在傳統的hex和RGB值中增加了HSL特性，也就是增加了Opacity（透明度）和Alpha channels
.color { animation:1s ease 0s alternate none infinite color;}
@keyframes color{
from{ color:white;}
to{ color:black;}
}
1
font-size
.font-size { animation:1s ease 0s alternate none infinite font-size;}
@keyframes font-size{
from{ font-size:60px;}
to{ font-size:300px;}
}
1
width
.width { animation:1s ease 0s alternate none infinite width;}
@keyframes width{
from{ width:150px;}
to{ width:330px;}
}
height
.height { animation:1s ease 0s alternate none infinite height;}
@keyframes height{
from{ height:150px;}
to{ height:0;}
}
letter-spacing
.letter-spacing { animation:1s ease 0s alternate none infinite letter-spacing;}
@keyframes letter-spacing{
from{ letter-spacing:0;}
to{ letter-spacing:100px;}
}
1
line-height
.line-height { animation:1s ease 0s alternate none infinite line-height;}
@keyframes line-height{
from{ line-height:10px;}
to{ line-height:300px;}
}
1
opacity
.opacity { animation:1s ease 0s alternate none infinite opacity;}
@keyframes opacity{
from{ opacity:1;}
to{ opacity:0;}
}
1
outline-width
.outline-width { outline-color:black; outline-style: solid; animation:1s ease 0s alternate none infinite outline-width;}
@keyframes outline-width{
from{ outline-width:0;}
to{ outline-width:100px;}
}
1
outline-offset
.outline-offset { outline-style: dashed; outline-color:slategray; animation:1s ease 0s alternate none infinite outline-offset;}
@keyframes outline-offset{
from{ outline-offset:-5px;}
to{ outline-offset:30px;}
}
1
outline-color
.outline-color { outline-width: 30px; outline-style: solid; animation:1s ease 0s alternate none infinite outline-color;}
@keyframes outline-color{
from{ outline-color:transparent;}
to{ outline-color:red;}
}
1
padding
.padding { animation:1s ease 0s alternate none infinite padding;}
@keyframes padding{
from{ padding:0;}
to{ padding:0 200px 0 50px;}
}
text-indent
.text-indent { animation:1s ease 0s alternate none infinite text-indent;}
@keyframes text-indent{
from{ text-indent:0;}
to{ text-indent:100px;}
}
1
text-shadow
范例一
.text-shadow-1 { animation:1s ease 0s alternate none infinite text-shadow-1;}
@keyframes text-shadow-1{
from{ text-shadow:0 0 black;}
to{ text-shadow:20px 20px 10px rgba(0,0,0,.5);}
}
1
范例二
.text-shadow-2 { color: transparent; animation:1s ease 0s alternate none infinite text-shadow-2;}
@keyframes text-shadow-2{
from{ text-shadow:0 0 0 white;}
to{ text-shadow:0 0 10px white;}
}
1
范例三
.text-shadow-3 { color: transparent; animation:1s ease 0s alternate none infinite text-shadow-3;}
@keyframes text-shadow-3{
from{ text-shadow:0 0 white;}
to{ text-shadow:0 0 rgba(255,255,255,0), -45px -45px 0 red, -30px -30px 0 orange, -15px -15px 0 yellow, 0 0 0 green, 15px 15px 0 blue, 30px 30px 0 indigo, 45px 45px 0 violet;}
}
1
top
.top { position:relative; animation:1s ease 0s alternate none infinite top;}
@keyframes top{
from{ top:0;}
to{ top:100px;}
}
1
transform
范例一
.transform-1 { animation:1s ease 0s alternate none infinite transform-1;}
@keyframes transform-1{
from{ transform:rotate(0deg);}
to{ transform:rotate(360deg);}
}
1
范例二
.transform-2 { animation:1s ease 0s alternate none infinite transform-2;}
@keyframes transform-2{
from{ transform:scale(1);}
to{ transform:scale(2);}
}
1
范例三
.transform-3 { animation:1s ease 0s alternate none infinite transform-3;}
@keyframes transform-3{
from{ transform:skew(0);}
to{ transform:skew(180deg);}
}
1
范例四
.transform-4 { animation:1s ease 0s alternate none infinite transform-4;}
@keyframes transform-4{
from{ transform:rotate(0) scale(1);}
to{ transform:rotate(360deg) scale(0);}
}
1
范例五
.transform-5 { animation:1s ease 0s alternate none infinite transform-5;}
@keyframes transform-5{
from{ transform:perspective(400px) rotateY(0);}
to{ transform:perspective(400px) rotateY(360deg);}
}
1
范例六
.transform-6 { animation:1s ease 0s alternate none infinite transform-6;}
@keyframes transform-6{
from{ transform:perspective(400px) rotateX(0);}
to{ transform:perspective(400px) rotateX(360deg);}
}
1
范例七
.transform-7 { animation:1s ease 0s alternate none infinite transform-7;}
@keyframes transform-7{
from{ transform:perspective(400px) rotateY(0);}
to{ transform:perspective(400px) translateZ(150px) rotateY(180deg);}
}
1
范例八
.transform-8 { animation:1s ease 0s alternate none infinite transform-8;}
@keyframes transform-8{
from{ transform:perspective(400px) translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0);}
to{ transform:perspective(400px) translate3d(0,0,-5000px) rotateX(720deg) rotateY(360deg) rotateZ(-360deg);}
}
1
范例九
.transform-9 { animation:1s ease 0s alternate none infinite transform-9;}
@keyframes transform-9{
from{ transform:perspective(400px) rotate3d(.5,.5,0,0deg);}
to{ transform:perspective(400px) rotate3d(.5,.5,0,180deg);}
}
1
范例十
.transform-10 {transform-origin: 100% 50%; animation:1s ease 0s alternate none infinite transform-10;}
@keyframes transform-10{
from{ transform:perspective(400px) rotate3d(0,1,0,0deg);}
to{ transform:perspective(400px) rotate3d(0,1,0,-180deg);}
}
1
范例十一
.transform-origin {transform:rotate(45deg); animation:1s ease 0s alternate none infinite transform-origin;}
@keyframes transform-origin{
from{ transform-origin:50% 50%;}
to{ transform-origin:0 100%;}
}
1
二、CSS3動畫詳解
1、變形&過渡
- 2D變形&過渡
-
旋轉：設定旋轉角度，對應css：transform:rotate(ndeg) (工具里n為-360 – 360間的任意數值)
X軸縮放：設定X軸方向縮放，對應css: transform:scaleX(n)(工具里n為-5 – 5間的任意數值)
Y軸縮放：設定Y軸方向縮放，對應css: transform:scaleY(n)(工具里n為-5 – 5間的任意數值)
X軸位移：設定X軸位移，對應css：transform:translateX(npx)
Y軸位移：設定Y軸位移，對應css：transform:translateY(npx)
X軸傾斜：設定X軸傾斜，對應css：transform:skewX(ndeg)
Y軸傾斜：設定Y軸傾斜，對應css：transform:skewY(ndeg)
矩陣變形：設定矩陣變形，對應css：transform:matrix(a,c,e,b,d,f) c,e值用正弦或余弦值表示,ab為縮放值，df為位移值
變形原點 ：設定變形原點，對應css：transform-origin:X Y；transform-origin(X,Y):用來設置元素的運動的基點（參照點）。默認點是元素的中心點。其中X和Y的值可以是百分 值,em,px，其中X也可以是字符參數值left,center,right；Y和X一樣除了百分值外還可以設置字符值 top,center,bottom，這個看上去有點像我們background-position設置一樣；下面我列出他們相對應的寫法：
- top left | left top 等價于 0 0 | 0% 0%
- top | top center | center top 等價于 50% 0
- right top | top right 等價于 100% 0
- left | left center | center left 等價于 0 50% | 0% 50%
- center | center center 等價于 50% 50%（默認值）
- right | right center | center right 等價于 100% 50%
- bottom left | left bottom 等價于 0 100% | 0% 100%
- bottom | bottom center | center bottom 等價于 50% 100%
- bottom right | right bottom 等價于 100% 100%
其中 left,center right是水平方向取值，對應的百分值為left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一個值，表示垂直方向值不變
過渡屬性：執行變換的css屬性，語法：transition-property
延遲時間：指定元素 轉換過程的持續時間，語法：transition-duration
過渡效果：允許你根據時間的推進去改變屬性值的變換速率，語法：transition-timing-function。點擊對應按鈕添加過渡效果，點擊cubic-bezier()自定義立方貝塞爾曲線效果。
- 3D變形&過渡
-
透視：perspective有兩種寫法，一種是設置所有的子元素有一個共同的透視值，perspective作為一個屬性值來寫；一種是直接作用于元素本身，perspective作為transform的一個函數來寫如：
.wrap{-webkit-perspective:1000px;}
.wrap .child{-webkit-transform:perspective(1000px);}X軸旋轉: rotateX(angele),相當于rotate3d(1,0,0,angle)指定在3維空間內的X軸旋轉，語法：transform:perspective(length) rotateX(angele);
Y軸旋轉: rotateY(angele),相當于rotate3d(0,1,0,angle)指定在3維空間內的Y軸旋轉，語法：transform:perspective(length) rotateY(angele);
Z軸旋轉: rotateZ(angele),相當于rotate3d(0,0,1,angle)指定在3維空間內的Z軸旋轉，語法：transform:perspective(length) rotateZ(angele);
X軸縮放：scaleX(
):表示只在X軸(水平方向)縮放元素。 Y軸縮放：scaleY(
):表示只在Y軸(垂直方向)縮放元素。 Z軸縮放：scaleZ(
):表示只在Z軸縮放元素。前提是元素本身或者元素的父元素設定了透視值 X軸位移: : 表示只在X軸(水平方向)移動元素。語法：translateX(
); Y軸位移: 表示只在Y軸(水平方向)移動元素。語法：translateY(
); Z軸位移: 表示只在Z軸(水平方向)移動元素。語法：translateZ(
); X軸傾斜：設定X軸傾斜，對應css：transform:skewX(ndeg)
Y軸傾斜: ：設定Y軸傾斜，對應css：transform:skewY(ndeg)
變形原點: 同2D
過渡屬性: 同2D
過渡時間: 同2D
延遲時間: 同2D
過渡效果: 同2D
2、自定義動畫
-
動畫名稱：自定義動畫的名稱, 對應css：animation-name:
執行時間：指定對象動畫的持續時間，對應css: animation-duration:
延遲執行設置動畫延遲執行的時間，對應css: animation-delay:
執行次數：設置對象動畫的循環次數，對應css: animation-iteration-count:
或infinite（無限循環） 變形原點：同變形&過渡
過渡效果：允許你根據時間的推進去改變屬性值的變換速率，語法：animation-timing-function。點擊對應按鈕添加過渡效果，點擊cubic-bezier()自定義立方貝塞爾曲線效果。
播放方向：：設置對象動畫循環播放次數大于1次時，動畫是否反向運動。語法：animation-direction:
隱藏背景：設置對象動畫時間之外的狀態。語法：animation-fill-mode:
動畫狀態設置對象動畫的狀態，語法：animation-play-state:
執行動畫的屬性: 設置動畫過程中對象屬性
3、動畫庫
-
Animate.css的動畫庫。Animate.css是由Dan Eden制作的CSS3動畫效果合集。只要在頁面引入該樣式表，然后給要添加動作的元素中添加對應動畫的class即可。
點擊對應效果右側查看實例，點擊查看代碼可直接查看對應效果的源碼。
三、運用CSS3的頁面案例
- 1、純CSS3實現質感發光動畫按鈕
- 2、10大經典CSS3菜單應用欣賞
- 3、9種CSS3炫酷圖片預覽展示動畫特效
- 4、純CSS3炫酷3D旋轉立方體爆炸展開動畫特效
CSS3工具介紹
cssanimate
CSS3可以實現很多漂亮的動畫，但寫起來有點麻煩，一個動畫有時候會調整幾十分鐘，改一點點代碼又要到瀏覽器上刷新，這是個很討厭的事情。幸運的是，cssanimate在線工具解決了我們的問題，最大特色就是以圖形界面方式讓你輕易實現漂亮的CSS3動畫效果，下面一起看看這個在線工具的介紹。
- Timeline（時間軸）
-
Timeline是引導動畫的重要區域，就像制作逐幀動畫一樣，可以調整每幀的內容。用戶調整完畢后，直接點擊左下角的播放按鈕即可看到效果。
- 視區
-
視區就是CSS3動畫預覽和調整區域，所見即所得，很強大。
- 屬性面板
-
用于調整動畫細節參數，可以對關鍵幀進行更精細的調整，如時間、旋轉、重復次數等。
- Code面板
-
當你調整完動畫后，那么就在這里直接COPY到你的網頁上就能使用了，另外你還可以修改Class和Animation名稱，還有瀏覽器前綴選項，根據需求調整。
總結
這確實是一個很方便的CSS3動畫在線制作工具，即使對CSS代碼不太了解的設計師們也可以輕松實現一個漂亮的動畫效果出來。
工具名稱：cssanimate
AniCollection
CSS動畫實現比JS簡單很多，但是對于新手來說還是很多代碼的，而且還要不停的刷新來計算動畫效果，不過沒關系，接下來將為大家分享一個可以在線生成CSS動畫的工具：AniCollection，而且他們的動畫數量很多，能滿足一般需要求了。目前AniCollection上有很多不錯的動畫特效，比較適用于鼠標HOVER或點擊事件，最主要的是能直接在線生成，比較簡便。
使用方法
STEP 1: 選擇你要的動畫效果，點擊“眼睛”圖標。
STEP 2: 然后在下面通過下面TAG選項框，把CSS和HTML的代碼復制到你的網頁上即可。
此外你還要以用jQuery來控制動畫。
工具名稱：AniCollection