今天將之前學習的transition和transform結(jié)合稻薇，做一些小構(gòu)件沟涨，包括按鈕框况毅，分享框等等，并且重新回顧了之前學習過的CSS動畫效果尔艇。
CSS3 可以創(chuàng)建動畫尔许，它可以取代許多網(wǎng)頁動畫圖像、Flash 動畫和 JavaScript 實現(xiàn)的效果终娃。
CSS3 @keyframes 規(guī)則
要創(chuàng)建 CSS3 動畫味廊，會用到@keyframes?
@keyframes 規(guī)則內(nèi)指定一個 CSS 樣式和動畫將逐步從目前的樣式更改為新的樣式。動畫是使元素從一種樣式逐漸變化為另一種樣式的效果棠耕∮喾穑可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。
使用百分比來規(guī)定變化發(fā)生的時間窍荧，或用關(guān)鍵詞 "from" 和 "to"辉巡，等同于 0% 和 100%。
0% 是動畫的開始搅荞，100% 是動畫的完成红氯。
為了得到最佳的瀏覽器支持，應(yīng)該始終定義 0% 和 100% 選擇器咕痛。
而且還應(yīng)當在?@keyframes?創(chuàng)建動畫痢甘，把它綁定到一個選擇器，否則動畫不會有任何效果茉贡。也就是在css選擇器中設(shè)置animation屬性塞栅。
animation所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性腔丧。3
animation-name規(guī)定 @keyframes 動畫的名稱放椰。3
animation-duration規(guī)定動畫完成一個周期所花費的秒或毫秒。默認是 0愉粤。3
animation-timing-function規(guī)定動畫的速度曲線砾医。默認是 "ease"。3
animation-fill-mode規(guī)定當動畫不播放時（當動畫完成時衣厘，或當動畫有一個延遲未開始播放時）如蚜，要應(yīng)用到元素的樣式。3
animation-delay規(guī)定動畫何時開始影暴。默認是 0错邦。3
animation-iteration-count規(guī)定動畫被播放的次數(shù)。默認是 1型宙。3
animation-direction規(guī)定動畫是否在下一周期逆向地播放撬呢。默認是 "normal"。3
animation-play-state規(guī)定動畫是否正在運行或暫停妆兑。默認是 "running"魂拦。
實例代碼如下：
也可將代碼簡寫成如下方式毛仪。
