CSS Transform和動畫

夜雨江南xv2lqq 2019-01-07

展開全文

Transform

CSS3中引入的transform屬性可以讓元素實現(xiàn)變形,，旋轉(zhuǎn),，縮放等視覺效果,。

2D變化

2D的transform應(yīng)用在x和y軸上，而3D的則多了一條z軸,。

1. Rotate旋轉(zhuǎn)

.box {
  transform: rotate(20deg); //順時針
}
.box2 {
  transform: rotate(-20deg); //逆時針
}

可以將一個元素繞著旋轉(zhuǎn)點進行0到360度的旋轉(zhuǎn)操作,。默認(rèn)的旋轉(zhuǎn)點是在元素的中心點上（50% 50%）。

2. Scale縮放

.box {
  transform: scale(.5); //縮小為原來的一半
}

.box2 {
  transform: scale(2); //放大為原來的兩倍
}

你也可以只針對寬度或者高度進行縮放操作,。

.box {
  transform: scaleX(2); //將寬度變?yōu)樵瓉淼膬杀?}

.box2 {
  transform: scaleY(.25); //將高度變?yōu)樵瓉淼?5%
}

3. Skew 傾斜

.box {
  transform: skewX(-5deg); //X軸順時針旋轉(zhuǎn)5度
}

.box1 {
  transform: skewY(20deg); //Y軸逆時針旋轉(zhuǎn)20度
}

.box3 {
  transform: skew(-5deg, 20deg); //同時作用在X和Y軸上
}

4. Translate 平移

.box {
  transform: translateX(-10px); //在橫軸上向左平移10個像素點
}

.box2 {
  transform: translateY(20%); //在Y軸上向下平移其自身高度的20%
}

.box3 {
  transform: translate(-10px, 20%); //同時在X軸和Y軸上平移
}

5. Matrix矩陣

矩陣形式是將變形函數(shù)組合成一個矩陣形式進行使用的,，通常都需要借助工具。更詳細的說明可以參考這里,。

這些變形模式可以同時作用在一個元素上,。如

.box { transform: roateX(20deg) skew(20deg, 45deg) translateX(20px) scale(2, 2); }

Transfrom Origin

默認(rèn)的變換原點是在元素的中心，如果我們想要改變它,，可以使用屬性transform-origin,。它接受兩個值，分別指定X和Y軸上的位置,?？梢允褂胮x或百分比作為單位,也可以使用bottom,left等值進行定義。

.box {
  transform: rotate(15deg);
  transform-origin: 0 0; //以左上角點為變換點進行旋轉(zhuǎn)
}

3D變化

3D是以2D變化為基礎(chǔ)的,，只是增加了一個z軸,。這條z軸是可以看做一個虛擬垂直與屏幕的坐標(biāo)軸，它代表在元素的遠近距離。其中正值代表離屏幕越近,，負值代表離屏幕越遠,。

Perspective

perspective在中文中翻譯為透視，這個屬性值在應(yīng)用中主要是用來指定元素離觀看者的距離,，值的設(shè)定一般來說設(shè)置為< 300px時會有強烈失真,，500~1000px失真中等，2000px以上失真輕微,。

定義perspective屬性可以選擇直接定義在transform中,，如：

.box {
  transform: perspective(300px) rotateX(20deg);
}

也可以選擇定義在父元素上，這樣,，所有子元素都將使用這個值:

.parent {
  perspective: 300px;
}

.child  {
  transform: rotateX(20deg);
}

perspective-origin

這個屬性是叫做“透視原點”,，可以使用X軸與Y軸的長度數(shù)據(jù)或百分比,，以及l(fā)eft/center等值進行設(shè)置,。默認(rèn)值為50% 50%?？梢钥醋鲧R頭在平面上的距離,。

backface-visibility

這個屬性用來控制是否可以看到被擋住的那些面，它的值分為visible或hidden,。

Transition

transition主要是用來做過渡效果的,，可以提供使元素間的變化顯得不那么生硬。

屬性	值	作用
transition-property	CSS屬性值	定義哪些CSS屬性會應(yīng)用transition
transition-duration	時間	定義transition的持續(xù)時間
transition-timing-function	時間函數(shù)：ease\|linear\|ease-in\|step-start等	用來控制過渡效果速度函數(shù)的
transition-delay	時間	延遲

transition屬性的合并用法是按照上述的屬性順序進行定義的,。缺失的將使用默認(rèn)值,。

.box {
  transition: all .5s ease; 
}

Animation & Keyframes

要使用CSS動畫，需要先定義一個關(guān)鍵幀（keyframes),。關(guān)鍵幀指明在特定時間點元素所展示出來的樣式狀態(tài),。觸發(fā)的時間點用百分比表示，其中from關(guān)鍵字相當(dāng)于0%,to關(guān)鍵字相當(dāng)于100%,。在定義關(guān)鍵幀中元素樣式時候,!important關(guān)鍵字會被忽略,。

@keyframes animationName {
  0% {
    opacity: 1;
  }
  
  100% {
    opacity: 0;
  }
}

@keyframes fadeFromTo {
  from {
    opacity: 1;
  }
  
  to {
    opacity: 0;
  }
}

animation的屬性有

屬性	值	作用
animation-name	定義的`keyframes`名字	用來獲取定義的動畫效果
animation-duration	時間長度	用來指定動畫從開始到結(jié)束所用時間
animation-delay	時間長度	延遲時間
animation-iteration-count	數(shù)字（可以使用小數(shù)）或 infinite(無限)	動畫循環(huán)播放次數(shù)
animation-timing-function	linear等	定義動畫播放函數(shù)，用以控制播放速度曲線
animation-fill-mode	none,forwards,backwards,both	指定當(dāng)動畫播放結(jié)束的時候應(yīng)用到元素上的樣式
animation-direction	normal,reverse,alternate,alternate-reverse	控制動畫是否反向播放

其簡寫形式為:

animation : <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

多個動畫

當(dāng)要對一個元素添加多個動畫效果時,，需要用,分隔開來,，如：

.element {
  animation: fadeIn 4s 1s infinite linear alternate,
            rotate 4s 1s infinite linear alternate;
}

@keyframes fadeIn {
  to {
    opacity: 0;
  }
}

@keyframes rotate {
  to {
    transform: rotate(180deg);
  }
}

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點,。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻花（0） +1

來自：夜雨江南xv2lqq > 《待分類》

舉報/認(rèn)領(lǐng)