今天準備學習一下CSS3關于轉換的相關屬性，不用說，繼續(xù)跟著鑫神的腳步前進，不愿做奴隸的人們哈哈哈鑫神不僅技術了得，手繪段子水平也是一流啊，想要整理的比他好真的很難吶~
CSS3動畫相關的屬性
- transform：變換效果，其作用相當于PS中的ctrl+t自由變換
transform屬性：
rotate 旋轉
scale 尺寸放大縮小
skew 傾斜角度
translate移動距離
transform: skew(35deg);
transform:scale(1, 0.5);
transform:rotate(45deg);
transform:translate(10px, 20px);
- transition：過渡效果，其作用就是平滑的改變CSS的值，常用于平滑變化到hover之后的狀態(tài)
transform屬性：
transition-property : //指定過渡的性質，比如transition-property:backgrond 就是指backgound參與這個過渡
transition-duration：//指定這個過渡的持續(xù)時間
transition-delay： //延遲過渡時間
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)建一段動畫然后在規(guī)定時間內執(zhí)行
animation的屬性：
animation-name 規(guī)定需要綁定到選擇器的 keyframe 名稱。。
animation-duration 規(guī)定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function 規(guī)定動畫的速度曲線。
animation-delay 規(guī)定在動畫開始之前的延遲。
animation-iteration-count 規(guī)定動畫應該播放的次數。infinite無窮的
animation-direction 規(guī)定是否應該輪流反向播放動畫。
.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;
}
具體實例參照原文：CSS3 Transitions, Transforms和Animation使用簡介與應用展示
github代碼：https://github.com/Iris-mao/css-tricks/tree/master/picRotate
