CSS3的過渡效果(transition)與動畫(animation)

1.Transition

Transition是一種直觀上的效果，讓DOM元素的某個屬性在固定時間內從一舊值到一新值。目前Firefox、Opera、Safari和Chrome都支持transition ，IE還不支持。

語法：transition: property duration timing-function delay;

transition-property  指定的要改變的css屬性名稱

transition-duration 指定過分效果要花多少時間(s/ms)

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 之間的數值。

 

.test{width:100px;height:100px;background:red;transition:width 2s,height 2s,background 2s;} .test:hover{width:300px;height:300px;background:blue} <div class="test"></div>

 

transition-delay 定義過渡效果的延遲時間   

linear

ease

ease-in

ease-out

ease-in-out

2. Animation

CSS動畫(Animations)簡單說就是在一段固定的動畫時間內暗中在某一頻率內改變其CSS某個或某些值,從而達到視覺上的轉換動畫效果。Animations的不少方面都是能夠控制的，包括動畫運行時間，開始值和結束值，還有動畫的暫停和延遲其開始時間等。

目前支持Animation的瀏覽器有：Firefox、 Safari 和 Chrome，IE和Opera還不支持。

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

屬性	描述	CSS
@keyframes	規定動畫。	3
animation	全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。	3
animation-name	規定 @keyframes 動畫的名稱。	3
animation-duration	規定動畫完成一個週期所花費的秒或毫秒。默認是 0。	3
animation-timing-function	規定動畫的速度曲線。默認是 "ease"。	3
animation-delay	規定動畫什麼時候開始。默認是 0。	3
animation-iteration-count	規定動畫被播放的次數。默認是 1。	3
animation-direction	規定動畫是否在下一週期逆向地播放。默認是 "normal"。	3
animation-play-state	規定動畫是否正在運行或暫停。默認是 "running"。	3
animation-fill-mode	規定對象動畫時間以外的狀態。	3

 

div.ani { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s alternate infinite; /*Safari and Chrome*/
} @-webkit-keyframes mymove /*Safari and Chrome*/
{ from {left:0px;} to {left:200px;} } div.ani:hover{ -webkit-animation-play-state: paused;
} <div class="ani"></div>

 無縫滾動

This is a test 1.

This is a test 2.

This is a test 3.

This is a test 4.

This is a test 5.

This is a test 1.