CSS中利用Transition實現動畫效果

在CSS 3引入Transition(過渡)這個概念之前,CSS是沒有時間軸的。也就是說,所有的狀態變化,都是即時完成。例如在以前當滑鼠放置于縮略圖之上,縮略圖會迅速變大。注意,縮略圖的變大是瞬間實現的。下面是代碼,相當簡單。


具體例子

代碼如下

img{
height:15px;
width:15px;
}

img:hover{
height: 450px;
width: 450px;
}

transition的作用在于,指定狀態變化所需要的時間。

代碼如下
img{
transition: 1s;
}

我們還可以指定transition適用的屬性,比如只適用于height。

代碼如下
img{
transition: 1s height;
}

這樣一來,只有height的變化需要1秒實現,其他變化(主要是width)依然瞬間實現~

例子

代碼如下

<nav>
<ul id="main-nav">
<li><a href=http://www.111cn.net>HOME</a></li>
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
</ul>
</nav>

怎麽來實現這個功能呢?

#main-nav a{
opacity: 1;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
}

#main-nav a:hover{
opacity: 0.5; }

· transition的使用注意
(1)目前,各大浏覽器(包括IE 10)都已經支持無前綴的transition,所以transition已經可以很安全地不加浏覽器前綴。
(2)不是所有的CSS屬性都支持transition,完整的列表查看這裏,以及具體的效果。
(3)transition需要明確知道,開始狀態和結束狀態的具體數值,才能計算出中間狀態。比如,height從0px變化到100px,transition可以算出中間狀態。但是,transition沒法算出0px到auto的中間狀態,也就是說,如果開始或結束的設置是height: auto,那麽就不會産生動畫效果。類似的情況還有,display: none到block,background: url(foo.jpg)到url(bar.jpg)等等。

· transition的局限
transition的優點在于簡單易用,但是它有幾個很大的局限。
(1)transition需要事件觸發,所以沒法在網頁載入時自動發生。
(2)transition是一次性的,不能重複發生,除非一再觸發。
(3)transition只能定義開始狀態和結束狀態,不能定義中間狀態,也就是說只有兩個狀態。
(4)一條transition規則,只能定義一個屬性的變化,不能涉及多個屬性。
CSS Animation就是爲了解決這些問題而提出的。

更多相關文章
  • jsp中利用jfreechart實現統計效果圖
    本文章詳細的介紹了關于jsp中利用jfreechart實現統計效果圖,有需要的同學可以參考一下下哦.1 preparation1.1 sample introductionJFreeChart是JAVA平台上的一個開放的圖表繪制類庫.I完全使用JAVA語言編寫,是爲applications, app ...
  • css中position:fixed實現div居中
    下面給大家介紹一個css中position:fixed實現div居中的例子,希望此例子能給各位朋友帶來幫助哦.上下左右 居中 代碼如下 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h
  • 分享一款jsp中利用servlet實現圖片上傳代碼,也算是超級簡單的方法了,有需要的朋友參考一下. 代碼如下 首先,頁面中即JSP中需要如下的組件:<h2 class="h2"> 上傳照片: </h2> <form action="pic. ...
  • 有時候我們在wordpress網站發表文章時,文章可能會很長或者圖片比較多,一個頁面展示起來太長太累,怎麽辦呢?分頁顯示呗這時候,我們就要用到一個wordpress函數——wp_link_pages()了.那麽,怎樣通過wp_link_pages()函數來實現wordpress文章的分頁顯示呢?下面 ...
  • 如果我們要實現兩端對齊一般的辦法是實現不了的,這裏我們借助于inline-block + justify來實現列表兩端對齊.text-justify版本:IE5+專有屬性 繼承性:無 語法:1.text-justif
  • Android中viewPager+fragment實現滑頁效果實例
    在手機app應用中,滑頁效果非常常用,本文我們分享在Android應用開發中,用viewPager+fragment如何實現滑動分頁效果的實例.效果圖如下,手指在手機向左或者向右滑就可以實現相應的頁面切換.先看activity_main.xml文件,非常簡單,主要是三個標題TextView和view
  • CSS3中利用Flexbox實現DIV標簽元素垂直居中
    對于很多的前端我們都不知道Flexbox是什麽用處了,如果你對于Flexbox不了解我們下
  • CSS3要制作動畫是非常的簡單的事情了,我們只需要簡單的幾行代碼就可以實現動畫效果,下文來看一個CSS3使用Animate.css制作超炫的動畫效果.Animate.css是一個超強的CSS3動畫庫,它使用簡單,只需要將相關效果對應的class加入頁面元素中,就能實現翻轉.滑動.旋轉等等複雜超炫的跨 ...
一周排行