CSS自學筆記（14）:CSS3動畫效果

標籤：style   blog   http   color   java   使用   os   io   

在CSS3中也新增了一些能夠對元素建立動畫處理的屬性。通過這些新增的屬性，我們可以實現元素從一種樣式變換成另一種樣式時為元素添加動態效果，我們就可以取代網頁中的動態圖片、flash動畫和JavaScript了。

CSS3中新增的動畫效果的屬性以及主流瀏覽器支援情況

屬性	瀏覽器支援
transition	IE	Firefox	Chrome	Safari(-webkit-)	Opera
@keyframes	IE	Firefox	Chrome(-webkit-)	Safari(-webkit-)	Opera
animation	IE	Firefox	Chrome(-webkit-)	Safari(-webkit-)	Opera

註：

• IE9以及更早版本不支援這三個新增屬性。
• 在Safari瀏覽器中，需要加(-webkit-)首碼。
• 在Chrome瀏覽器中，@keyframes和animation屬性需要加(-webkit-)首碼。

transition屬性

屬性	描述	預設值
transition	簡寫，用於在一個屬性中設定四個過渡屬性。	無
transition-property	定義過渡效果的 CSS 屬性的名稱。	無
transition-duration	定義過渡效果所用時間。	0
transition-timing-function	定義過渡效果的時間曲線。	ease
transition-delay	定義過渡效果開始時間。	0

下面是一個簡單的CSS樣式

img {    width: 90px;    height: 90px;    transition-property: width, height, transform;    transition-duration: 1s, 1s, 1s;    transition-timing-function: ease-in-out, ease-in, ease-out;    transition-delay: 1s, 1s, 0s;}img:hover{    width: 200px;    height: 200px;    transform: rotate(90deg);}

實現效果是當滑鼠懸浮在元素(img)上時，他的寬度、高度和方向會發生變化，過渡時間都為1s，過渡方式分別為ease-in-out, ease-in和ease-out，旋轉效果會立刻執行，而高寬操作會在1s後變化。

當滑鼠移出元素所在範圍時，它會逐漸層回原來的樣式。

我們也可以transition簡寫來完成定義上面的樣式：

img {    width: 90px;    height: 90px;    transition:width 1s ease-in-out 1s, height 1s ease-in 1s, transform 1s ease-out 0s; ;}img:hover{    width: 200px;    height: 200px;    transform: rotate(90deg);}

我們還可以通過@keyframes規定來建立動畫規則，通常用在較為複雜而又無需用到False動畫和JavaScript的地方。

例如下面一個簡單的動畫效果

動畫效果

部分CSS樣式代碼為：

#my_animate {    width: 60px;    height: 60px;    background: #060;    color: #fff;    position: relative;    font: bold 12px ‘微軟雅黑‘;    padding: 20px 10px 0px 10px;    animation: my_animate 5s infinite;}@keyframes my_animate { 0%   {transform: rotate(0deg);left:0px;} 25%  {transform: rotate(90deg);left:0px;} 50%  {transform: rotate(0deg);left:400px;} 55%  {transform: rotate(0deg);left:400px;} 70%  {transform: rotate(-30deg);left:400px;background:#ff9;color:#000;} 100% {transform: rotate(-360deg);left:0px;}}

使用@keyframes建立動畫時，需要綁定一個選取器。建立動畫時至少要定義動畫的名稱和動畫的時間長度，這樣即可將@keyframes建立動畫綁定到相應的選取器上。

若在建立動畫時沒有定義時間長度，那麼就會取預設值0，就不會執行動畫效果。

animation屬性以及說明

屬性	描述	說明
@keyframes	建立動畫規則
animation	定義動畫簡寫屬性	除了 animation-play-state 屬性
animation-name	定義 @keyframes 動畫的名稱
animation-duration	定義動畫完成一個周期所花費時間(秒或者毫秒)	預設值：0
animation-timing-function	定義動畫的速度曲線	預設值 ：ease
animation-delay	定義動畫何時開始	預設值 ：0
animation-iteration-count	定義動畫被播放的次數	預設值 ：1
animation-direction	定義動畫是否在下一周期逆向地播放	預設值 ：normal
animation-play-state	定義動畫是否正在運行或暫停	預設值 ：running
animation-fill-mode	定義對象動畫時間之外的狀態

上面的定義的動畫效果是一個周期5s，並且進行無限次的迴圈播放。在@keyframes中規定了動畫的6各階段的樣式，最終形成一個簡單的動畫效果。