transition-timing-function屬性怎麼用-css教學-PHP中文網

首頁

web前端

css教學

transition-timing-function屬性怎麼用

青灯夜游

Feb 01, 2019 pm 01:43 PM

css3 過渡

transition-timing-function屬性是用來規定過渡效果的速度曲線，它允許過渡效果隨著時間來改變其速度；可以實現慢速開始，然後變快，然後慢速結束等等的過渡效果。

transition-timing-function屬性怎麼用

CSS3 transition-timing-function屬性

作用：transition- timing-function 屬性規定過渡效果的速度曲線。此屬性允許過渡效果隨著時間改變其速度。

語法：

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

附註：Internet Explorer 9 以及更早版本的瀏覽器不支援 transition-timing-function 屬性；Internet Explorer 10、Firefox、Opera 和 Chrome 支援 transition-timing-function 屬性。 Safari 支援替代的 -webkit-transition-timing-function 屬性。

CSS3 transition-timing-function屬性的使用範例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style> 
div
{
width:100px;
height:100px;
background:red;
margin: 10px 0px;
}
.demo1{
transition:width 2s;
transition-timing-function:linear;
/* Firefox 4 */
-moz-transition:width 2s;
-moz-transition-timing-function:linear;
/* Safari and Chrome */
-webkit-transition:width 2s;
-webkit-transition-timing-function:linear;
/* Opera */
-o-transition:width 2s;
-o-transition-timing-function:linear;
}
.demo2{
transition:width 2s;
transition-timing-function:ease;
/* Firefox 4 */
-moz-transition:width 2s;
-moz-transition-timing-function:ease;
/* Safari and Chrome */
-webkit-transition:width 2s;
-webkit-transition-timing-function:ease;
/* Opera */
-o-transition:width 2s;
-o-transition-timing-function:ease;
}
.demo1:hover,.demo2:hover
{
width:300px;
}
</style>
</head>
<body>
<p>请把鼠标指针移动到红色的 div 元素上，查看过渡效果。</p>
<p>匀速过渡</p>
<div class="demo1"></div>
<p>慢速开始，然后变快，然后慢速结束</p>
<div class="demo2"></div>
<p><b>注：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>

登入後複製

效果圖：

transition-timing-function屬性怎麼用

### ###以上就是本篇文章的全部內容，希望能對大家的學習有所幫助。更多精彩內容大家可以追蹤php中文網相關教學欄位！！！ ###

以上是transition-timing-function屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7854

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1241

Related knowledge

純CSS3怎麼實現波浪效果？（程式碼範例） Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果？這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法，希望對大家有幫助！

CSS過渡效果：如何實現元素的淡入淡出效果 Nov 21, 2023 am 08:03 AM

CSS過渡效果：如何實現元素的淡入淡出效果引言：在網頁設計中，使元素具備過渡效果是提升使用者體驗的重要手段之一。而淡入淡出效果是一種常見而又簡潔的過渡效果，能夠使元素從無到有、由淺入深的顯示。本文將介紹如何使用CSS來實現元素的淡入淡出效果，並給出具體的程式碼範例。一、使用transition屬性實現元素的淡入淡出效果CSS的transition屬性可以為元素添