<address id="xpjh9"><listing id="xpjh9"><meter id="xpjh9"></meter></listing></address>

<address id="xpjh9"><address id="xpjh9"><listing id="xpjh9"></listing></address></address>
<noframes id="xpjh9">
<noframes id="xpjh9">

<address id="xpjh9"><address id="xpjh9"><listing id="xpjh9"></listing></address></address>
    <form id="xpjh9"></form><address id="xpjh9"><listing id="xpjh9"><menuitem id="xpjh9"></menuitem></listing></address>

      <noframes id="xpjh9">
      VB.net 2010 視頻教程 VB.net 2010 視頻教程 VB.net 2010 視頻教程
      SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
      當前位置:
      首頁 > 網站開發 > HTML >
      • css教程之transition-duration [過渡時間]

      • 2017-05-26 00:01 來源:未知

      transition-duration用來定義轉換動畫的時間長度,即從舊屬性換到新屬性花費的時間,單位為秒。

      默認情況下動畫過渡時間為0秒,所以當我們指定元素動畫時會看不到過渡的過程直接看到結果。

      語法

      transition-duration:<time>[ ,<time>]*;設置動畫的過渡時間。
      語法項目 說明
      初始值 0
      適用于 所有元素,以及:before和:after偽元素
      可否繼承
      媒介 視覺
      版本 CSS3.0

      說明

      transition-duration可以設置動畫過渡的時間[執行時間],默認值0表示不過渡直接看到執行后的結果。單位是秒,也可以是毫秒。

      取值

      0:不執行過渡,直接看到結果。

      time:指定動畫執行的時間。

      實例代碼

      CSS
      
      				
      1. .transition_property_1{
      2.     -webkit-transition:ease all;
      3.     -moz-transition:ease all;
      4.     -webkit-transition-duration:0;
      5.     -moz-transition-duration:0;
      6.     position:absolute;
      7.     left:10px;
      8.     top:50px;
      9. }
      10. .transition_property_2{
      11.     -webkit-transition:ease all;
      12.     -moz-transition:ease all;
      13.     -webkit-transition-duration:5s;
      14.     -moz-transition-duration:5s;
      15.     position:absolute;
      16.     left:250px;
      17.     top:50px;
      18. }
      19. .transition_property_1:hover,
      20. .transition_property_2:hover{
      21.     width:500px;
      22.     height:300px;
      23. }
      復制
      HTML
      
      				
      1. <div class="demo_box transition_property_1">動畫沒有過渡時間</div>
      2. <div class="demo_box transition_property_2">動畫執行5秒</div>
      復制
      運行一下 »

      兼容性

      IE Firefox Opera Safari Chrome
      IE 10+ Firefox 3.5+ Opera 11.50+ Safari 10+ Chrome 2.0+

      相關教程
      江苏快3 诸暨 | 漯河 | 承德 | 屯昌 | 铜陵 | 松原 | 鸡西 | 林芝 | 图木舒克 | 台北 | 昌吉 | 任丘 | 昆山 | 泰兴 | 丹阳 | 阿克苏 | 普洱 | 平凉 | 滁州 | 钦州 | 桓台 | 兴化 | 塔城 | 溧阳 | 佳木斯 | 肇庆 | 安岳 | 基隆 | 庄河 | 昌吉 | 晋城 | 长兴 | 潜江 | 神农架 | 喀什 | 酒泉 | 齐齐哈尔 | 伊春 | 黑河 | 临沧 | 宝鸡 | 灌南 | 丹阳 | 山西太原 | 崇左 | 昌吉 | 甘孜 | 河北石家庄 | 运城 | 贵港 | 吉林 | 图木舒克 | 漳州 | 宝应县 | 建湖 | 明港 | 玉溪 | 牡丹江 | 莱州 | 黄石 | 防城港 | 澳门澳门 | 长垣 | 台州 | 厦门 | 乐平 | 济宁 | 阳泉 | 延边 | 甘南 | 鄂尔多斯 | 许昌 | 庄河 | 海门 | 如皋 | 杞县 | 临夏 | 长治 | 贵港 | 锦州 | 甘肃兰州 | 招远 | 喀什 | 徐州 | 湖州 | 宁波 | 高密 | 仙桃 | 晋城 | 扬州 | 张家口 | 五家渠 | 宜春 | 阿拉尔 | 九江 | 桂林 | 南平 | 文山 | 眉山 | 四川成都 | 遵义 | 燕郊 | 松原 | 抚州 | 毕节 | 海拉尔 | 娄底 | 阿拉尔 | 寿光 | 吴忠 | 台北 | 六安 | 建湖 |