CSS3的過渡，動畫，圖形轉換

wangly19發表於2019-04-26
CSSS3動畫

CSS3的學習小節

遲來的CSS3學習，在CSS3中，增加了許多的新特性，像過度動畫，圓角，媒體查詢...等等新的特性，可以給我們開發者日常使用。

過渡

過度動畫關鍵字【transition】 transition : css屬性 時間 方式 時間 詳細寫就是:

  • transition-property 規定需要過渡的css屬性名稱
  • transition-duration 規定過渡效果需要花費的時間
  • transition-timing-function 規定過渡效果的時間曲線
  • transiity-delay 規定過渡效果開始的時間

DEMO:當滑鼠移入，寬度將從 100px => 300px之間的動作

# HTML
<section>my tranition Demo</section>
# CSS
<style>
        section{
            width: 100px;
            height: 100px;
            border-radius : 10px;
            background-color: cadetblue;
            transition : width 2s ease 0.2s;
        }
        section:hover{
            width: 300px;
        }
    </style>
複製程式碼

各個transition的屬性值

/* transition-property */
transition-property : none|all|屬性列表(多個可以用逗號分開)
/* transition-duration */
transition-duration : 時間（秒或者毫秒）
/* transition-timing-function */
transition-timing-function : 
/*
1.linear : 開始到結束都是一個速度(勻速運動)
2.ease : 從慢速開始，逐漸變快，然後慢速結束(拋物線運動)
3.ease-in : 以慢速開始的過渡
4.ease-out : 以慢速結束的過渡
5.ease-in-out : 慢速開始和結束的過渡
6.cubic-bezier : 在函式中自定義自己的值
*/
/* transition-delay */
transition-delay: 時間(執行過渡開始的時間)
複製程式碼

動畫

要建立CSS動畫，你需要了解keyframes規則和animation屬性。 @keyframes需要規定變化發生的時間，可以使用百分比如0%,50%,100%等等，也可以用from和to表示0%和100%。0%是動畫的開始，100%是動畫的結束。 Demo

/* 建立@keyframes規則 from and to*/
 @keyframes anim{
 from {
  width: 150px;
  height: 150px;
  background-color: blue;
  }
  to {
    width: 400px;
    height: 400px;
    background-color: beige;
    } 
}
/* 百分比方式 */
@keyframes anim1{
  0% {
  width: 150px;
  }25% {
  width: 300px;
  }50% {
  width: 150px;
  }100% {
  width: 300px;
  }
}
複製程式碼

animation屬性

animation的屬性列表

  • animation-name : @keyframes的名稱值
  • animation-duration : 動畫指定的完成時間
  • animation-timing-function : 規定動畫的時間曲線
  • animation-delay ： 設定動畫開始的時間
  • animation-iteration-count : 動畫播放次數
  • animation-direction ：是否反覆播放動畫
  • animation-fill-mode : 規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式
  • animation-play-state : 動畫狀態，是否在執行
/* animation-name ps:上面已經定義了@keyframes*/
animation-name : anim;
/* animation-duration */
animation-duration : 5s;
/* 
animation-timing-function
具體可以參考transition-timing-function
*/
animation-timing-function :  linear;
animation-timing-function :  ease;
animation-timing-function :  ease-in;
animation-timing-function : ease-out;
animation-timing-function : ease-in-out;
/* animation-delay--給定一個時間 */
animation-delay : 3s; 
/*animation-iteration-count : n(次數)|infinite(一直)*/
animation-iteration-count : 2 | infinite;
/* animation-direction */
animation-direction : normal /* 正常播放 */
animation-direction : reverse /* 反向播放 */
animation-direction : alternate /* 奇數正常播放，偶數反向播放 */
animation-direction : alternate-reverse /* 奇數反向播放，偶數正常播放 */
animation-direction : initial /* 預設值 */
animation-direction : inherit /* 父元素繼承 */
複製程式碼

圖形的轉換

在學習transform的時候需要理解2D和3D的區別，2D的話說簡單點就是在一個象限之間的操作，或者是通過本身的X,Y軸進行，而3D是一個立體的，會在X,Y,Z軸中進行轉換，區別如同一個正方形和正方體一般。

2D轉換

通過transform欄位和其2D方法進行操作，2D方法如下：

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()
/* 
tanslate(x,y) 根據設定的XY引數，從當前元素位置移動 
*/
# 向X位置移動100px,Y位置不動，也就像右移動了100px，Y軸同理
transform: translate(100px,0px);
-ms-transform: translate(100px,0px);
-webkit-transform:translate(100px,0px);

/* 
rotate() 給定一個引數，使元素順時針旋轉，如果負值將逆時針旋轉
*/
# 順時針旋轉45度
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);

/* scale() X，Y軸方法縮放多少倍 */
# X,Y軸放大兩倍
transform: scale(2,2);
-ms-transform: scale(2,2);
-webkit- transform: scale(2,2);

/* skew() 斜切 */
# skewX X軸傾斜
# skewY Y軸傾斜
transform: skew(30deg,30deg);
-ms-transform: skew(30deg,30deg); 
-webkit-transform: skew(30deg,30deg ); 
複製程式碼

matrix() 矩陣物件

說起來可能會有一點抽象，該方法的初始值為 matrix(1,0,0,1,0,0) 可能不是非常好理解，具體可以去看一下別人總結的數學公式 Demo

# 矩陣
--    --
|1 2 3 |
|4 5 6 |
|7 8 9 |
--    --
複製程式碼

transform-origin

tranform-ogigin允許你修改元素的X,Y,Z軸。相對於2D和3D來講。

/* transform-origin:X Y Z */
transform-origin: 300px 300px;/* 可以是百分比，也可以是位置單位 */
複製程式碼

3D轉換

transform的3D轉換的一些常用方法和屬性如下

  • rotateX()
  • rotateY()
  • transform-style
  • perspective
  • perspective-origin
  • backface-visibility
/* rotateX() 圍繞X軸順時針轉動 */
# X軸順時針轉動100度
transform: rotateX(100deg);
-webkit-transform: rotateX(100deg); 
/* rotateY() 圍繞Y軸順時針轉動 */
# Y軸順時針轉動100度
transform: rotateY(100deg);
-webkit-transform: rotateY(100deg); 
複製程式碼

transform-style

transform-style屬性指定巢狀元素是怎樣在三維空間中呈現。

/* transform-style */
# flat ： 所有子元素都在2D平面呈現
# preserve-3d ： 表示所有子元素都在3D平面呈現
transform-style: flat;
transform-style: preserve-3d;
複製程式碼

perspective

perspective表示3D元素的透視，定義的perspective屬性，它是一個元素的子元素，透檢視，而不是元素本身。

perspective: none;/* 不透視 */
perspective: 200px;/* 透視的區域 */
複製程式碼

perspective-origin

perspective-origin屬性定義3d元素所基於的X,Y軸，該屬性允許你修改元素的底部位置，具有x-axis和y-axis引數

/* x-axis引數具有幾種可能 */
# left
# center
# right
# length
# %百分比
/* y-axis引數具有幾種可能 */
# left
# center
# right
# length
# %百分比
複製程式碼

backface-visibility

backface-visibility屬性定義當元素不面向螢幕時是否可見，在旋轉元素不希望看到背面的時候使用效果很好。

/* backface-visibility */
backface-visibility: visible; /* 背面是可見的 */
backface-visibility: hidden; /* 背面是不可見的 */
複製程式碼

總結

遲來的css3trans**系列學習，都是一些常識性的學習，主要是一些情況下使用不至於特別懵逼。matrix() 矩陣物件確實是無從下筆，因為內容有點雜，涉及離散數學。想深入學習可以去看一些比較深入的文章

相關文章