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加入頁面元素中,就能實現翻轉.滑動.旋轉等等複雜超炫的跨 ...
一周排行
  • 本文我們來小結一下ios開發中應用視圖的幾個小知識點:push/modal/popover/replace/custom,Storyboard的出現,爲了使設計View更容易.在storyboard中,segue有幾
  • hash算法 consistent hashing 詳解圖
    Consistent hashing算法就是這樣一種hash算法,它的算法思想是:首先求出 ...
  • Yaf,全稱 Yet Another Framework,是一個C語言編寫的PHP框架,[1]是一個用PHP擴展形式提供的PHP開發框架, 相比于一般的PHP框架, 它更快. 它提供了Bootstrap, 路由, 分 ...
  • 北京時間9月7日消息,據科技新聞網站Business Insider報道,由年僅24歲的年輕人本·考夫曼(Ben Kaufman)創立的熱門紐約創業公司Quirky近日在C輪融資中獲得了6800萬美元投資.這意味著,
  • Python 爬蟲App版Json解析的例子
    前面介紹過一篇web版本的爬蟲python代碼,現在我們知道app非常的流行了,下面來看一 ...
  • DataGridView定位是開發中常用到的一個功能了,但有很多開發者會發現使用DataGridView定位時會出現不少問題,下面本文就給各位介紹一下解決方法吧.先來看個例子DataGridView上下方向鍵定位 代
  • 本文章給各位同學介紹兩款GoDaddy最新2013域名注冊優惠碼.com,支持支付寶,給大家更多更好優惠信息提供.第一個優惠信息分享一個2013年最新的godaddy 域名續費優惠碼優惠金額:$8.17/yrGoda
  • 下面此教程適用于一台剛上架的linux系統配置安裝lampp環境了,lampp環境是指定linux,apache,mysql及php環境了,下面一起來看看過安裝好之後基本就可以使用了.此配置適用于一台全新的Linux
  • 如果你沒有伺服器權限但伺服器有些功能給禁止了這時我們就可以通過下面的方法來嘗試設置開啓此功能哦,下面我給各位整理了不少.php.ini常用到的修改信息(自定義設置)@@ini_set('memory_limit',
  • 本文章先是詳細的了介紹關于FCKEditor2.6.6在asp環境下的安裝然後再一一介紹了關于FCKEditor2.6.6各項配置說明,有需要了解的朋友可以參考.對于ASP系統來說:FCKEditor根目錄,僅保留& ...