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:03）觸發器：常用的觸發器是幾個偽類，: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:告訴瀏覽器將元素的格式保持為動畫結束時候的樣子。 ? ? ?
?
?
轉載于:https://www.cnblogs.com/bobodeboke/p/6252869.html
總結
以上是生活随笔為你收集整理的css3的新特性transform,transition,animation的全部內容，希望文章能夠幫你解決所遇到的問題。
