|
實例 把鼠標指針放到div 元素上,其寬度會從100px 逐漸變為300px:
- div
- {
- width:100px;
- transition: width 2s;
- -moz-transition: width 2s; /* Firefox 4 */
- -webkit-transition: width 2s; /* Safari 和 Chrome */
- -o-transition: width 2s; /* Opera */
- }
複製代碼
親自試一試
瀏覽器支持IE | Firefox | Chrome | Safari | Opera | | | | | |
Internet Explorer 10、Firefox、Opera 和Chrome 支持transition 屬性。 Safari 支持替代的-webkit-transition 屬性。 註釋: Internet Explorer 9以及更早版本的瀏覽器不支持transition屬性。
定義和用法transition 屬性是一個簡寫屬性,用於設置四個過渡屬性: - transition-property
- transition-duration
- transition-timing-function
- transition-delay
註釋:請始終設置transition-duration屬性,否則時長為0,就不會產生過渡效果。
默認值: | all 0 ease 0 | 繼承性: | no | 版本: | CSS3 | JavaScript 語法: | object .style.transition="width 2s" |
語法- transition: property duration timing-function delay;
複製代碼
上一節花了大篇幅整理了CSS3中動畫屬性中的Transform,今天我們接著一起來看CSS3動畫屬性中的另一個屬性Transition。
W3C標準中對css3的transition這是樣描述的:“css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發,並圓滑地以動畫效果改變CSS的屬性值。”
下面我們同樣從其最語法和屬性值開始一步一步來學習transition的具體使用
語法:
- transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
複製代碼
transition主要包含四個屬性值:執行變換的屬性:transition-property,變換延續的時間:transition-duration,在延續時間段,變換的速率變化transition-timing-function,變換延遲時間transition-delay。下面分別來看這四個屬性值
一、transition-property:
語法:
- transition-property : none | all | [ <IDENT> ] [ ',' <IDENT> ]*
複製代碼
transition-property是用來指定當元素其中一個屬性改變時執行transition效果,其主要有以下幾個值:none(沒有屬性改變);all(所有屬性改變)這個也是其默認值;indent(元素屬性名)。當其值為none時,transition馬上停止執行,當指定為all時,則元素產生任何屬性值變化時都將執行transition效果,ident是可以指定元素的某一個屬性值。其對應的類型如下:
1、color: 通過紅、綠、藍和透明度組件變換(每個數值處理)如:background-color,border-color,color,outline-color等css屬性;
2、length: 真實的數字如:word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height ,line-height,height,border-width,border-spacing,background-position等屬性;
3、percentage:真實的數字如:word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background -position等屬性;
4、integer離散步驟(整個數字),在真實的數字空間,以及使用floor()轉換為整數時發生如:outline-offset,z-index等屬性;
5、number真實的(浮點型)數值,如:zoom,opacity,font-weight,等屬性;
6、transform list:詳情請參閱:《CSS3 Transform》
7、rectangle:通過x, y, width 和height(轉為數值)變換,如:crop
8、visibility: 離散步驟,在0到1數字範圍之內,0表示“隱藏”,1表示完全“顯示”,如:visibility
9、shadow: 作用於color, x, y 和blur(模糊)屬性,如:text-shadow
10、gradient: 通過每次停止時的位置和顏色進行變化。它們必須有相同的類型(放射狀的或是線性的)和相同的停止數值以便執行動畫,如:background-image
11、paint server (SVG): 只支持下面的情況:從gradient到gradient以及color到color,然後工作與上麵類似
12、space-separated list of above:如果列表有相同的項目數值,則列表每一項按照上面的規則進行變化,否則無變化
13、a shorthand property: 如果縮寫的所有部分都可以實現動畫,則會像所有單個屬性變化一樣變化
具體什麼css屬性可以實現transition效果,在W3C官網中列出了所有可以實現transition效果的CSS屬性值以及值的類型,大家可以點這裡了解詳情。這裡需要提醒一點是,並不是什麼屬性改變都為觸發transition動作效果,比如頁面的自適應寬度,當瀏覽器改變寬度時,並不會觸發transition的效果。但上述表格所示的屬性類型改變都會觸發一個transition動作效果。
二、transition-duration:
語法:
- transition-duration : <time> [, <time>]*
複製代碼
transition-duration是用來指定元素轉換過程的持續時間,取值:<time>為數值,單位為s(秒)或者ms(毫秒),可以作用於所有元素,包括:before和:after偽元素。其默認值是0,也就是變換時是即時的。
三、transition-timing-function:
語法:
- <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
複製代碼
取值:
transition-timing-function的值允許你根據時間的推進去改變屬性值的變換速率,transition-timing-function有6個可能值:
1、ease:(逐漸變慢)默認值,ease函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
2、linear:(勻速),linear 函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
3、ease-in:(加速),ease-in 函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0).
4、ease-out:(減速),ease-out 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0).
5、ease-in-out:(加速然後減速),ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
6、cubic-bezier:(該值允許你去自定義一個時間曲線),特定的cubic-bezier曲線。(x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。所有值需在[0, 1]區域內,否則無效。
其是cubic-bezier為通過貝賽爾曲線來計算“轉換”過程中的屬性值,如下曲線所示,通過改變P1(x1, y1)和P2(x2, y2)的坐標可以改變整個過程的Output Percentage。初始默認值為default.
其他幾個屬性的示意圖:
四、transition-delay:
語法:
- transition-delay : <time> [, <time>]*
複製代碼
transition-delay是用來指定一個動畫開始執行的時間,也就是說當改變元素屬性值後多長時間開始執行transition效果,其取值:<time>為數值,單位為s(秒)或者ms(毫秒),其使用和transition-duration極其相似,也可以作用於所有元素,包括:before和:after偽元素。默認大小是"0",也就是變換立即執行,沒有延遲。
有時我們不只改變一個css效果的屬性,而是想改變兩個或者多個css屬性的transition效果,那麼我們只要把幾個transition的聲明串在一起,用逗號(“,”)隔開,然後各自可以有各自不同的延續時間和其時間的速率變換方式。但需要值得注意的一點:transition-delay與transition-duration的值都是時間,所以要區分它們在連寫中的位置,一般瀏覽器會根據先後順序決定,第一個可以解析為時間的怭值為transition-duration第二個為transition-delay。如:
- a {
- -moz-transition: background 0.5s ease-in,color 0.3s ease-out;
- -webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
- -o-transition: background 0.5s ease-in,color 0.3s ease-out;
- transition: background 0.5s ease-in,color 0.3s ease-out;
- }
複製代碼
如果你想給元素執行所有transition效果的屬性,那麼我們還可以利用all屬性值來操作,此時他們共享同樣的延續時間以及速率變換方式,如:
- a {
- -moz-transition: all 0.5s ease-in;
- -webkit-transition: all 0.5s ease-in;
- -o-transition: all 0.5s ease-in;
- transition: all 0.5s ease-in;
- }
複製代碼
綜合上述我們可以給transition一個速記法:transition: <property> <duration> <animation type> <delay>如下圖所示:
相對應的一個示例代碼:
- p {
- -webkit-transition: all .5s ease-in-out 1s;
- -o-transition: all .5s ease-in-out 1s;
- -moz-transition: all .5s ease-in-out 1s;
- transition: all .5s ease-in-out 1s;
- }
複製代碼
瀏覽器的兼容性:
因為transition最早是有由webkit內核瀏覽器提出來的,mozilla和opera都是最近版本才支持這個屬性,而我們的大眾型瀏覽器IE全家都是不支持,另外由於各大現代瀏覽器Firefox,Safari ,Chrome,Opera都還不支持W3C的標準寫法,所以在應用transition時我們有必要加上各自的前綴,最好在放上我們W3C的標準寫法,這樣標準的會覆蓋前面的寫法,只要瀏覽器支持我們的transition屬性,那麼這種效果就會自動加上去:
- //Mozilla内核
- -moz-transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
- //Webkit内核
- -webkit-transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
- //Opera
- -o-transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
- //W3C 标准
- transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
複製代碼
通過上面,我想大家對CSS3的Transition屬性的使用有一定的概念存在了,下面為了加強大家在這方面的使用,我們一起來看下面的DEMO。我們通過實踐來鞏固前面的理論知識,也通過實踐來加強transition的記憶。
DEMO一:
DEMO一我們主要是在一個div中放置了幾個小塊,分別是對應了transition-timing-function中的幾種類型,我們在div的hover狀態下,改變其部分屬性,從而達到一種動畫效果。我們也可以使用jq來點擊一個按鈕,觸發這個div(說簡單點就是通過按鈕的點擊事件給這個div加上一個class,讓其子元素都觸發相對應的transition動畫效果),為了讓大家能更好的學習和理解,我把相應的代碼貼在這裡,感興趣的朋友就跟著做一下吧,也可以直接把代碼複製到你本地頁面運行查看效果。
Html Code:
- <a id="timings-demo-btn">click</a>
- <div id="timings-demo">
- <div id="ease" class="demo-box">Ease</div>
- <div id="ease-in" class="demo-box">Ease-in</div>
- <div id="ease-out" class="demo-box">Ease-out</div>
- <div id="ease-in-out" class="demo-box">Ease-in-out</div>
- <div id="linear" class="demo-box">Linear</div>
- <div id="cubic-bezier" class="demo-box">Cubic-bezier</div>
- </div>
複製代碼
CSS Code:
- #timings-demo {
- border: 1px solid #ccc;
- padding: 10px;
- height: 400px;
- width: 400px;
- }
-
- .demo-box {
- width: 100px;
- height: 50px;
- text-align: center;
- line-height: 50px;
- text-align: center;
- color: #fff;
- background: #96c;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- border-radius: 5px;
- -moz-box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5);
- -webkit-box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5);
- box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5);
- margin-bottom: 10px;
- }
- //ease效果:
- #ease {
- -moz-transition: all 5s ease 0.3s;
- -webkit-transition: all 5s ease 0.3s;
- -o-transition: all 5s ease 0.3s;
- transition: all 5s ease 0.3s;
- background: #f36;
- }
- //ease-in效果:
- #ease-in {
- -moz-transition: all 3s ease-in 0.5s;
- -webkit-transition: all 3s ease-in 0.5s;
- -o-transition: all 3s ease-in 0.5s;
- transition: all 3s ease-in 0.5s;
- background: #369;
- }
- //ease-out效果:
- #ease-out {
- -moz-transition: all 5s ease-out 0s;
- -webkit-transition: all 5s ease-out 0s;
- -o-transition: all 5s ease-out 0s;
- transition: all 5s ease-out 0s;
- background: #636;
- }
- //ease-in-out效果:
- #ease-in-out {
- -moz-transition: all 1s ease-in-out 2s;
- -webkit-transition: all 1s ease-in-out 2s;
- -o-transition: all 1s ease-in-out 2s;
- transition: all 1s ease-in-out 2s;
- background: #3e6;
- }
- //linear效果:
- #linear {
- -moz-transition: all 6s linear 0s;
- -webkit-transition: all 6s linear 0s;
- -o-transition: all 6s linear 0s;
- transition: all 6s linear 0s;
- background: #999;
- }
- //cubic-bezier效果:
- #cubic-bezier {
- -moz-transition: all 4s cubic-bezier 1s;
- -webkit-transition: all 4s cubic-bezier 1s;
- -o-transition: all 4s cubic-bezier 1s;
- transition: all 4s cubic-bezier 1s;
- background: #6d6;
- }
- //hover状态下或单击click按钮后demo-box产生属性变化
- #timings-demo.timings-demo-hover .demo-box,
- #timings-demo:hover .demo-box {
- -moz-transform: rotate(360deg) scale(1.2);
- -webkit-transform: rotate(360deg) scale(1.2);
- -o-transform: rotate(360deg) scale(1.2);
- transform: rotate(360deg) scale(1.2);
- background: #369;
- border: 1px solid rgba(255,230,255,08);
- -moz-border-radius: 25px;
- -webkit-border-radius: 25px;
- border-radius: 25px;
- margin-left: 280px;
- height: 30px;
- line-height: 30px;
- margin-bottom: 15px;
- }
複製代碼
使用单击事件给dimings-demo加上一个timings-demo-hover的class名,使用demo-bxo产生属性变化
- $(document).ready(function(){
- $("#timings-demo-btn").toggle(
- function(){
- $(this).next("div#timings-demo").addClass("timings-demo-hover");
- },function(){
- $(this).next("div#timings-demo").removeClass("timings-demo-hover");
- });
- });
複製代碼
我們來看看其效果圖
未改變屬性效果
正在變換中
執行完動畫後的最終效果
上圖是鼠標移動到#timings-demo的div產生的效果變換示意圖,你單擊“click”按鈕同樣會產生上面的一個動畫效應,為了節約空間,這裡不在貼出示意圖。
DEMO二:
我們在來看另外一個DEMO,這個示例是通過CSS3的transition模仿製作jQuery的slideshow效果,當然這種效果跟js和jQ製作出來的是沒得比,但有時還是可以用一用的,以前騰訊就使用過這樣的一個效果。我們這個DEMO實現的效果原理跟上一個DEMO極其相似,這裡我們是通過select的change事件來觸slideshow的CSS3屬性變化,這裡應用到一部分jQuery,主要是製作數字切換和前一張下一張的按鈕,以及select的change事件。下面我把代碼貼出以供大家參考,如果你跟著做了的話,你會覺得CSS3的transition真的是魅力是無窮的。
Html Code:
- <div id="demoSliderContainer">
- <ul id="demoSlider" class="slide-images">
- <li class="slide-image">
- <img src="/images/monstersinc.jpg" alt="monsters inc" />
- <span>Monsters Inc</span>
- </li>
- <li class="slide-image">
- <img src="/images/nemo.jpg" alt="nemo" />
- <span>Nemo</span>
- </li>
- <li class="slide-image">
- <img src="/images/up.jpg" alt="up" />
- <span>Up</span>
- </li>
- <li class="slide-image">
- <img src="/images/walle.jpg" alt="walle" />
- <span>Wall-E</span>
- </li>
- </ul>
- <div class="options">
- <a href="javascript:;" class="prevSlide">Prev</a>
- <span class="slide-pager">
- <a href="" class="javascript:;">1</a>
- <a href="" class="javascript:;">2</a>
- <a href="" class="javascript:;">3</a>
- <a href="" class="javascript:;">4</a>
- </span>
- <a href="javascript:;" class="nextSlide">Next</a>
- </div>
- </div>
- <div id="options">
- <label for="transitionEffect">Transition effect :</label>
- <select id="transitionEffect">
- <option value="transition-opacity">opacity fade</option>
- <option value="transition-left">left slide</option>
- <option value="transition-right">right slide</option>
- <option value="transition-top">top slide</option>
- <option value="transition-bottom">bottom slide</option>
- <option value="transition-zoom">zoom</option>
- <option value="transition-dezoom">de-zoom</option>
- <option value="transition-cornerzoom">corner zoom</option>
- <option value="transition-rotate">rotate</option>
- </select>
- </div>
複製代碼
CSS Code:
jQuery Code:
- <script type="text/javascript">
- $(document).ready(function(){
- $(".slide-images").each(function(){
- var slider = $(this);
- var slides = $(".slide-image",slider);
- var sliderPages = $(".slide-pager");
-
- //Slide Navigation
-
- var currentSlideNum = 0;
- slides.removeClass("current");
- slides.eq(currentSlideNum).addClass("current");
- sliderPages.each(function(){
- var pages = $("a",this);
- pages.removeClass("current");
- pages.eq(currentSlideNum).addClass("current");
- });
-
- var goToSlide = function(slideNum) {
- slides.eq(currentSlideNum).removeClass("current");
- slides.eq(slideNum).addClass("current");
- sliderPages.each(function(){
- var pages = $("a", this);
- pages.eq(currentSlideNum).removeClass("current");
- pages.eq(slideNum).addClass("current");
- });
- currentSlideNum = slideNum;
- };
-
- var nextSlide = function() {
- var nextSlideNum = currentSlideNum + 1;
- if(nextSlideNum >= slides.size())
- nextSlideNum = 0;
- goToSlide(nextSlideNum);
-
- };
-
- var prevSlide = function() {
- var prevSlideNum = currentSlideNum - 1;
- if(prevSlideNum < 0)
- prevSlideNum = slides.size() - 1;
- goToSlide(prevSlideNum);
-
- };
-
- //transition effects
- var setTransitionEffect = function(transitionEffect) {
- slider.attr("class","slide-images "+ transitionEffect);
- };
-
- $("#transitionEffect").change(function(){
- setTransitionEffect($(this).val());
- }).change();
-
- //Navigation binding
-
- $(".prevSlide").click(prevSlide);
- $(".nextSlide").click(nextSlide);
- $(".slide-pager a").each(function(i){
- if(i >= slides.size()) return false;
- $(this).click(function(){
- goToSlide(i);
- });
- });
-
- //Auto next slide
-
- var lastHumanNav = 0;
- $(".prevSlide, .nextSlide, .slide-pager a").click(function(){
- lastHumanNav = new Date().getTime();
- });
- setInterval(function(){
- var now = new Date().getTime();
- if(now - lastHumanNav > 5000)
- nextSlide();
- },5000);
- });
- });
-
- </script>
複製代碼
記得在你的本地頁面頭部加上jQuery的版本庫文件。
效果示意圖:
DEMO二思路來自於Greweb.fr並在其基礎上增加了right silde,bottom silde,rotate三種效果,如果你感興趣的話可以在這個基礎上增加更多的slideshow效果,比如利用transform的scale,skew等製作出更出色的效果。
上面我主要介紹了兩個實例,如果你對這兩個實例還不過癮的話,下面有更多的關於transition的實例:DEMO三、DEMO四
那麼今天我們關於CSS3的transition就簡單的介紹到這裡,下一節我們一起接著學習CSS3中動畫屬性的最後一個屬性動畫(animation),感興趣的可以觀注本站關於CSS3的最新更新情況。 |
|