transform變形
主要包括以下幾種：
1檩互、旋轉(zhuǎn) transform:rotate()
#d1>p:hover{
transform: rotate(45deg);
}
2如迟、傾斜transform:skew()
#d2>p:hover{
transform: skew(35deg);
}
3、縮放transform:scale()
#d3>p:hover{
transform: scale(1.5);
}
4绊谭、位移transform:translate()
#d4>p:hover{
transform: translate(10px,20px);
}
5政恍、原點transform:origin(50% 50%)
#d9>p{
transition: 2s;
transform-origin:50% 50%;
}
transition過渡
1、過渡動畫的效果transition-property:width;
#d5>p{
/*過渡動畫效果*/
transition-property: width;
}
2达传、過渡動畫準(zhǔn)備的時間transition-delay:2s
#d6>p{
/*過渡動畫準(zhǔn)備的時間*/
transition-property: width;
transition-delay: 2s;
}
3篙耗、過渡動畫持續(xù)的時間transition-duration:3s
#d7>p{
/*過渡效果持續(xù)的時間*/
transition-property: width;
transition-delay: 2s;
transition-duration:3s ;
}
***綜合寫法：transition：width(屬性) 3s(持續(xù)時間) 5s(等待時間); **
Animation動畫
定義動畫：keyframes
語法：@keyframes animationName{keyframs-selector{style}}
animationName：動畫定義的名稱
keyframs-selector：動畫時長的百分比
** · **from 與 0% 相同
** · **to 與100% 相同
Animation 播放方式
1、播放方式
播放次數(shù)：infinite （無限次循環(huán)）
播放速度：animation-timing-function：（規(guī)定速度曲線）
linear:勻速
ease:以低速開始宪赶，然后加速宗弯，結(jié)束時變慢
ease-in:以低速開始
ease-out:以低速結(jié)束
ease-in-out:以低速開始和結(jié)束
cubic-bezier：貝塞爾曲線
cubic-bezier(x1,y1,x2,y2)從0-1的值數(shù)
2、播放時間
定義動畫何時開始：animation-delay: time;
定義動畫完成所需時間：animation-duration: time;
3搂妻、播放方向
動畫播放方向： animation-direction:(方向)
normal：默認(rèn)值蒙保，正常播放
alternate-reverse：反向開始，來回播放
alternate：動畫來回播放
reverse：反向開始播放
4欲主、播放次數(shù)
動畫播放次數(shù)：nimation-iteration-count:(次數(shù))
n:自定義次數(shù)
infinite：定義動畫無限播放
5邓厕、不播放時
動畫時間外：animation-fill-mode:
