css3的新特性transform,transition,animation

一、transform

css3引入了一些可以對網頁元素進行變換的屬性，比如旋轉，縮放，移動，或者沿着水平或者垂直方向扭曲（斜切變換）等等。這些的基礎都是transform屬性

transform屬性有一項奇怪的特性，就是它們對於其周圍的元素不會產生影響。換句話說，如果將一個元素旋轉45度，它實際上是重疊在元素的上方，下方或者旁邊。而不會移動其周圍的內容。

旋轉：transform:rotate(-45deg);

縮放：transform:scale(.5);scaleX(2);scaleY(3)。如果給了負值，能夠達到翻轉的效果：scaleX(-1)

移動：transform:translate(1px,2px).使用其他單位：em,%也是可以的。

傾斜：transform:skew(45deg,0);

當然，以上多個tranform的屬性可以結合使用；

transform-origin:一般來說，當對一個元素使用transform時，web瀏覽器就會以元素的中心點作為變黃點。該屬性可以指定變換點，可以提供關鍵字，以pixel為單位的絕對值，以及em,%等等。

二、transition

transition可以實現動態效果，實際上是一定時間之內，一組css屬性變換到另一組屬性的動畫展示過程。

為了使transition生效，需要做這么幾件事：

2）兩個樣式：一個是最初的樣式，一個是最終的樣式，transition可以實現這兩種演示見的轉換過程。

2）transition屬性:

transition使用4個屬性控制：

要以動畫展示哪些屬性（transition-property）:可以使用all關鍵字

動畫過程有多久(transition--duration),

控制動畫速度變化（transition-timing-function:linear,ease,ease-in,ease-out,ease-in-out，貝塞爾曲線等），

動畫是否延遲執行（transition-delay）等

可以使用快捷方法來定義上述屬性：

 

.navButton{
   color:black;
  background-color:#fff;
  transition:color,background-color;
  transition-delay:1s, .5s;
}

.navButton:hover{
   color:red;
   background-color:#ccc;  
}

 

一般來說，將transition屬性應用到最初的樣式里，而不是放在結束的樣式里，即定義動畫開始之前的元素外觀的樣式。只需要給元素設置一次transition，瀏覽器就會負責以動畫展示從一個樣式到另一個樣式，再返回最初樣式的變化過程。

不過，在使用css下拉菜單的時候，有一個技巧，為了防止鼠標離開菜單的時候，菜單很快消失，可以利用transition-delay讓元素很快顯示，但是慢慢消失，做法是，在初始樣式中添加如下代碼：

transition-dealy:.5s

在：hover中不要添加延遲：

transition-delay:0

3）觸發器：常用的觸發器是幾個偽類，:active,:target,:focus，也可以是前后兩個類的改變。

 

三、animation

transition只能從一組css屬性變成另一組css屬性。animation則可以在多組屬性之間變換。

transition必須使用觸發器觸發，animation可以使用觸發器，也可以在頁面加載完成的時候自動觸發。

創建動畫有兩個步驟：

1.定義動畫：主要指定義關鍵幀

 

@keyframes fadeIn{
   from{
      opacity:0;
  },
  to{
     opacity:1;   
 }
}

 

2.將動畫應用到元素上

可以使用一下css屬性定義動畫：

.nav-button{
    animation-name:fadeIn;
    animation-duration:1s;
    animation-timing-function:ease-out,
   animation-delay:.5s;
   animation-iteration-count:infinite;  

animation-direction:alternate

}

 

 animation-name:和當初定義的動畫名稱相對應；

 animation-duration：動畫執行一次持續的時長；

animation-timing-function：動畫速率變化函數；

animation-delay：動畫延遲執行的時間長度；

animation-iteration-count：動畫執行的次數，可以是數字，或者關鍵字：infinate(無限運行)；

animation-direction:alternate; alternate(奇數次超前運行，偶數次后退運行).如希望動畫從黃色到藍色，並且再重復一次，使用alternate關鍵字就能夠防止從藍色突變為黃色
animation-fill-mode:告訴瀏覽器將元素的格式保持為動畫結束時候的樣子。