一、過渡
過渡的屬性寫在本身的元素上,鼠標(biāo)放上去有過渡效果,滑離的時候也有過渡效果
過渡的屬性寫在:hover 里,只有劃過的時候有過渡效果.
transition-property:
參與過渡的屬性?,可以寫多個,中間用逗號隔開,所有屬性都參與過渡寫all,可以省略不寫(不寫默認(rèn)是all)
transition-duration:?(必須寫)
參與過渡的時間,可以寫多個,中間用逗號隔開,時間的值要和參與過渡的屬性值一一對應(yīng)
單位:s ?ms ?1000ms=1s ?0.5s=.5s
transition-timing-function:?
過渡的速度變化曲線
默認(rèn)值是:ease
https://cubic-bezier.com/可以到這個地址里自己設(shè)置速度的變化
使用的是貝塞爾曲線
可以寫多個值,中間用逗號隔開,和參與過渡的屬性值一一對應(yīng)
transition-delay?過渡的延時時間,?可以寫多個值,中間用逗號隔開
和參與過渡的屬性值一一對應(yīng)
單位:s ?ms ?1000ms=1s ?0.5s=.5s
復(fù)合寫法:
transition:?all 1s?linear 2s;
其中過渡的時間是不可以省略的
過渡參與屬性省略:默認(rèn)是all
速度變化曲線省略:ease
延時省略:0
注意順序 前面的時間是過渡時間,后面的時間是延時時間
transition:?width 1s?linear 2s,height 3s?linear 1s;
多個的時候用逗號隔開
二、元素的轉(zhuǎn)換
1.?平移
transform:?translate(x軸的位置,y軸的位置);
transform:?translate(x軸的位置);
transform:?translateX(x軸的位置);
transform:?translateY(Y軸的位置);
正值:向右向下
負(fù)值:向左向上
不會影響頁面中其他元素的位置
2.?旋轉(zhuǎn)
transform:?rotate(旋轉(zhuǎn)的角度);
單位:deg
正值:順時針
負(fù)值:逆時針
backface-visibility:hidden? 不是正面面對屏幕就隱藏
3.?縮放
transform:?scale(x軸縮放的倍數(shù),y軸縮放的倍數(shù));
transform:?scale(x和y軸同時縮放的倍數(shù));
transform:?scale(負(fù)值);先翻轉(zhuǎn)再縮放
transform:?scaleX(x軸縮放的倍數(shù));
transform:?scaleY(Y軸縮放的倍數(shù));
4.?傾斜
transform:?skew(x軸傾斜的角度,y軸傾斜的角度);
transform:?skew(x軸傾斜的角度);
transform:?skewX(x軸傾斜的角度);
transform:?skewY(Y軸傾斜的角度);
5.?基準(zhǔn)點
transform-origin:x軸的位置,y軸的位置;
transform-origin:一個值的時候,這個值表示x軸的位置(y軸的位置默認(rèn)是center)
單位: px ?% ?
Left ?right top…
6.?3d旋轉(zhuǎn)
transform:?rotateX(旋轉(zhuǎn)角度);沿著x軸進(jìn)行旋轉(zhuǎn)
transform:?rotateY(旋轉(zhuǎn)角度);沿著Y軸進(jìn)行旋轉(zhuǎn)
transform:?rotateZ(旋轉(zhuǎn)角度);沿著Z軸進(jìn)行旋轉(zhuǎn)
transform:?rotateX(20deg)?rotateY(30deg)?rotateZ(45deg);
transform:?rotate3d(1,0,0,30deg);
(x,y,z,角度)xyz只的是方向,使用這種辦法可以開啟移動端的硬件加速
7.?perspective??景深
可以讓子元素有近大遠(yuǎn)小的效果,舒服的距離是500到1000.
8.?3d平移
transform:?translateZ();沿著z軸平移
transform:?translatex(100px)?translateY(200px)?translateZ(300px);
transform:?translate3d(200px,300px,400px)
9.?復(fù)合寫法:屬性值中間用空格隔開,先后順序會影響效果
transform:?rotate(45deg)?scale(2)?translate(100px,200px)?skew(30deg)
transform:translate(100px,200px)?rotate(45deg)?scale(2)??skew(30deg);
10.???
transform-style:?preserve-3d;?讓子元素保留其3d的位置
三、動畫
animation-name:?change;?動畫的名字(必須寫)
animation-duration:?4s;?動畫的持續(xù)時間(必須寫)
animation-timing-function:?linear;?速度變化曲線
animation-delay:?1s;?動畫延時(第一次)
animation-iteration-count:?infinite;
動畫的次數(shù)infinite無限循環(huán)
animation-direction:?alternate;
是否反向運(yùn)動
@keyframes?動畫的名字{
0%{}
10%{}
…
100%{}
}
可以寫from ?to
animation-fill-mode:
animation-play-state:?設(shè)置動畫播放或暫停
paused;暫停
running播放
????????????.box div{
????????????width:?100px;
????????????height:?100px;
????????????background:?tomato;
????????????animation:?change 4s?linear 1s?infinite alternate;
????????????animation-play-state:?paused;
????????}
????????.box:hover div{
????????????animation-play-state:?running;
????????}
