首先從字面來(lái)看，animation是動(dòng)畫，transition的過(guò)渡的意思
animation的屬性：
name 設(shè)置動(dòng)畫的名稱，
duration設(shè)置動(dòng)畫完成的周期，用
timing-function設(shè)置動(dòng)畫的速度曲線，
delay設(shè)置動(dòng)畫什么時(shí)候開始，
iteration-count設(shè)置動(dòng)畫播放的次數(shù)，
direction 規(guī)定下一個(gè)周期是否逆向的播放，
play-state動(dòng)畫是否正在進(jìn)行或者暫停，
fill-mode 設(shè)置動(dòng)畫停了之后位置什么狀態(tài)
transition的屬性
property 去設(shè)置過(guò)渡效果的屬性名稱，
duration 設(shè)置過(guò)渡效果的周期，
timing-function規(guī)定速度效果的速度曲線，
delay 設(shè)定過(guò)渡效果什么時(shí)候開始
區(qū)別：
- transition 是過(guò)渡，是樣式值的變化的過(guò)程，只有開始和結(jié)束；animation 其實(shí)也叫關(guān)鍵幀，通過(guò)和 keyframe 結(jié)合可以設(shè)置中間幀的一個(gè)狀態(tài)
- animation配合 @keyframe 可以不觸發(fā)事件就觸發(fā)這個(gè)過(guò)程，而 transition 需要通過(guò) hover 或者 js 事件來(lái)配合觸發(fā)
- animation 可以設(shè)置很多的屬性，比如循環(huán)次數(shù)，動(dòng)畫結(jié)束的狀態(tài)等等，transition 只能觸發(fā)一次
- animation 可以結(jié)合 keyframe 設(shè)置每一幀，但是 transition 只有兩幀
