今天準(zhǔn)備學(xué)習(xí)一下CSS3關(guān)于轉(zhuǎn)換的相關(guān)屬性，不用說，繼續(xù)跟著鑫神的腳步前進(jìn)，不愿做奴隸的人們_哈哈哈鑫神不僅技術(shù)了得，手繪段子水平也是一流啊，想要整理的比他好真的很難吶~

圖片發(fā)自簡(jiǎn)書App

CSS3動(dòng)畫相關(guān)的屬性

• transform：變換效果，其作用相當(dāng)于PS中的ctrl+t自由變換
  transform屬性：

rotate 旋轉(zhuǎn)
scale 尺寸放大縮小
skew 傾斜角度
translate移動(dòng)距離

 transform: skew(35deg); 
 transform:scale(1, 0.5); 
 transform:rotate(45deg); 
 transform:translate(10px, 20px); 

• transition：過渡效果，其作用就是平滑的改變CSS的值，常用于平滑變化到hover之后的狀態(tài)
  transform屬性：

transition-property : //指定過渡的性質(zhì)，比如transition-property:backgrond 就是指backgound參與這個(gè)過渡
transition-duration：//指定這個(gè)過渡的持續(xù)時(shí)間
transition-delay： //延遲過渡時(shí)間
transition-timing-function：//指定過渡類型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
其中：linear //線性過度 ， ease-in //由慢到快 ，ease-out //由快到慢 ，ease-in-out //由慢到快在到慢

transition:all 2s ease-in-out;

• animation：創(chuàng)建一段動(dòng)畫然后在規(guī)定時(shí)間內(nèi)執(zhí)行
  animation的屬性：

animation-name 規(guī)定需要綁定到選擇器的 keyframe 名稱。。
animation-duration 規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。
animation-timing-function 規(guī)定動(dòng)畫的速度曲線。
animation-delay 規(guī)定在動(dòng)畫開始之前的延遲。
animation-iteration-count 規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。infinite無窮的
animation-direction 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。

.anim_image:hover {
    background-color:#f0f3f9;
    -webkit-animation-name: glow;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;    
}

具體實(shí)例參照原文：CSS3 Transitions, Transforms和Animation使用簡(jiǎn)介與應(yīng)用展示
github代碼：https://github.com/Iris-mao/css-tricks/tree/master/picRotate