css3動畫效果：1基礎

標籤：指標   使用者   其他應用   blog   idt   瀏覽器   delay   iter   逗號   

css動畫分兩種：過渡效果transition 、主要畫面格動畫keyframes

一、過渡效果transition

需觸發一個事件（如hover、click）時，才改變其css屬性。

過渡效果通常在使用者將滑鼠指標浮動到元素上時發生

過渡(transition)動畫只能定義首尾兩個狀態

transition主要包含四個屬性值：

transition-property：執行變換的屬性，預設值all，也可以時其他應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔，如width,height 

transition-duration：變換延續的時間,以秒或毫秒計,eg. 5s

transition-timing-function：在延續時間段，變換的速率變化. 

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

值	描述
linear	規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。
ease	規定慢速開始，然後變快，然後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。
ease-out	規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。
ease-in-out	規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。

transition-delay：變換延遲時間,以秒或毫秒計。

二、主要畫面格動畫

@keyframes 類似Flash中的主要畫面格動畫製作。

animate不需要觸發任何事件的情況下也可以隨時間變化而改變，所以可以在元素上直接調用。

主要畫面格動畫一般分兩步： 定義動畫、將動畫應用到元素上

step1  定義動畫：

有兩種方法來對它進行定義：關鍵字from 和 to；或百分比

@keyframe 動畫名稱{   時間點 {       element status   }   時間點 {      元素狀態   }}

如

@keyframe zoomIn{          0% {opacity: 0,            transform-origin:center;             transform : rotate3d(0,0,1,-200deg);            }          100% {            opacity: 1,            transform-origin:center;             transform : none;          }   }

step2  綁定動畫，即將動畫應用到頁面元素上--利用animation屬性。

CSS3的Animation有八個屬性

1. animation-name :  keyframe 名稱
2. animation-duration :動畫期間
3. animation-delay ： 動畫開始前的延遲
4. animation-iteration-count  ： n|infinite， 預設值1
5. animation-direction ： normal|alternate;應該輪流反向播放動畫。 預設值normal（正常播放）  （alternate輪流反向播放）
6. animation-play-state 
7. animation-fill-mode 
8. animation-timing-function

 

一般簡寫為

animation: name duration timing-function delay iteration-count direction;

-webkit-animation: zoomIn 2s infinite linear;        animation: zoomIn 1s infinite linear;

瀏覽器安全色：
 @-webkit-keyframe

@keyframe 

-webkit-animation

animation 

 

css3動畫效果：1基礎