旋轉(zhuǎn)
transform
用來(lái)控制 元素 旋轉(zhuǎn) 平移 以及 放大縮小 等效果
可以跟 過(guò)渡時(shí)間 時(shí)間延遲 等屬性 搭配實(shí)現(xiàn) css動(dòng)畫(huà)
旋轉(zhuǎn) rotate
旋轉(zhuǎn)時(shí) 始終以元素 中心點(diǎn)為原點(diǎn) 進(jìn)行旋轉(zhuǎn)
.transform: rotate(45deg);.
transtion
過(guò)渡時(shí)間
只有值是數(shù)值類(lèi)型的屬性 才會(huì)有動(dòng)畫(huà)效果
(顏色的變化也會(huì)觸發(fā)）
設(shè)置過(guò)渡指定屬性
.transition-property: width,height;.
設(shè)置過(guò)渡時(shí)間
.transition-duration: 5s;.
設(shè)置過(guò)渡曲線
linear 默認(rèn)值 勻速
ease 慢=》快=》慢
ease-in 慢=》快
ease-out 快=》慢
.transition-timing-function: ease-out;.
設(shè)置延遲動(dòng)畫(huà)
.transition-delay: 1s;.
推薦寫(xiě)法
.transtion: 1s;.
.transtion-delay: 1s;.
translate 平移 參數(shù)單位 px
.transfrom:translate(x,y).
特性類(lèi)似于 相對(duì)定位 但是 不是定位
單獨(dú)設(shè)置X軸
.transfrom:translateX();.
單獨(dú)設(shè)置Y軸
.transfrom:translateY();.
scale 縮放
.transform: scale(1);.
3D空間
給父盒子聲明 3D空間
.transform-style: preserve-3d;.
@keyframes
定義幀動(dòng)畫(huà) 不需要在某個(gè)標(biāo)簽內(nèi) 直接在外面定義就行
···
@keyframes yl{
from{
/* 一開(kāi)始就執(zhí)行的 代碼 */
/* 起始狀態(tài) */
width: 400px;
}
to{
/* 最后結(jié)束時(shí)執(zhí)行的 代碼 */
/* 最終動(dòng)畫(huà)效果 */
height: 400px;
}
}
···
animation
使用 @keyframes 所定義的動(dòng)畫(huà)
第一個(gè)參數(shù) 動(dòng)畫(huà)名（@keyframes定義的動(dòng)畫(huà)名字）
第二個(gè)參數(shù) 動(dòng)畫(huà)執(zhí)行時(shí)間
第三個(gè)參數(shù) 速度曲線
linear 勻速 （使用最多的）
ease 慢——>快——>慢
ease-in 慢——>快
ease-out 快——>慢
第四個(gè)參數(shù) 播放次數(shù)
n 具體次數(shù)
infinite 無(wú)限次
第五個(gè)參數(shù) 是否反向播放
normal 正常播放
reserve 反向播放
alternate 先正后反 輪流播放
