1婚被、animation 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置動(dòng)畫屬性：
animation-name：規(guī)定 @keyframes 動(dòng)畫的名稱洗做。
animation-duration：規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒弓叛。默認(rèn)是 0。
animation-timing-function：規(guī)定動(dòng)畫的速度曲線诚纸。默認(rèn)是 "ease"撰筷。
animation-delay：規(guī)定動(dòng)畫何時(shí)開始。默認(rèn)是 0
animation-iteration-count：規(guī)定動(dòng)畫被播放的次數(shù)畦徘。默認(rèn)是 1毕籽。
animation-direction：規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是 "normal"旧烧。
animation-fill-mode：規(guī)定對(duì)象動(dòng)畫時(shí)間之外的狀態(tài)
2影钉、?transition?屬性
語法：transition:?property duration timing-function delay; 默認(rèn)值? all 0 ease 0
transition-property?指定CSS屬性的name，transition效果
其主要有以下幾個(gè)值：none(沒有屬性改變)掘剪；all（所有屬性改變）這個(gè)也是其默認(rèn)值平委；indent（元素屬性名）。
transition-duration?transition效果需要指定多少秒或毫秒才能完成
transition-timing-function?指定transition效果的轉(zhuǎn)速曲線
transition-timing-function的值允許你根據(jù)時(shí)間的推進(jìn)去改變屬性值的變換速率夺谁，transition-timing-function有6個(gè)可能值：
1廉赔、ease：（逐漸變慢）默認(rèn)值，ease函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
2匾鸥、linear：（勻速）蜡塌，linear 函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)勿负，ease-in 函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).
4馏艾、ease-out：（減速），ease-out 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后減速）琅摩，ease-in-out 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
6铁孵、cubic-bezier：（該值允許你去自定義一個(gè)時(shí)間曲線）， 特定的cubic-bezier曲線房资。 (x1, y1, x2, y2)四個(gè)值特定于曲線上點(diǎn)P1和點(diǎn)P2蜕劝。所有值需在[0, 1]區(qū)域內(nèi)，否則無效轰异。
其是cubic-bezier為通過貝賽爾曲線來計(jì)算“轉(zhuǎn)換”過程中的屬性值岖沛，如下曲線所示，通過改變P1(x1, y1)和P2(x2, y2)的坐標(biāo)可以改變整個(gè)過程的Output Percentage搭独。初始默認(rèn)值為default.
transition-delay?定義transition效果開始的時(shí)候
鼠標(biāo)滑過盒子大小不變 圖片放大實(shí)現(xiàn)過程
首先img外層結(jié)構(gòu)上有盒子包裹
鼠標(biāo)滑過的時(shí)候：hover
img {
? ? transform: scale(1.1, 1.1);放大
? }
本身img盒子上加過度效果transition: all 0.5s;
img的父級(jí)盒子加?overflow: hidden;
