Home > Article > Web Front-end > How to use the transition-timing-function attribute

How to use the transition-timing-function attribute

青灯夜游Original: 2019-02-01 13:43:453784browse

The transition-timing-function attribute is used to specify the speed curve of the transition effect, which allows the transition effect to change its speed over time; it can achieve transition effects that start slowly, then become faster, then end slowly, etc. .

CSS3 transition-timing-function attribute

Function:transition- The timing-function attribute specifies the velocity curve of the transition effect. This property allows the transition effect to change its speed over time.

Syntax:

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

Description:

linear: Specifies a transition effect that starts and ends at the same speed (equal to cubic -bezier(0,0,1,1)).

ease: Specifies the transition effect that starts slowly, then becomes faster, and then ends slowly (cubic-bezier(0.25,0.1,0.25,1)).

ease-in: Specifies the transition effect that starts at a slow speed (equal to cubic-bezier(0.42,0,1,1)).

ease-out: Specifies the transition effect that ends at a slow speed (equal to cubic-bezier(0,0,0.58,1)).

ease-in-out: Specifies a transition effect that starts and ends at a slow speed (equal to cubic-bezier(0.42,0,0.58,1)).

cubic-bezier(n,n,n,n): Define your own value in the cubic-bezier function. Possible values are between 0 and 1.

Note: Internet Explorer 9 and earlier browsers do not support the transition-timing-function attribute; Internet Explorer 10, Firefox, Opera and Chrome support the transition-timing-function attribute. Safari supports an alternative -webkit-transition-timing-function attribute.

CSS3 transition-timing-function attribute usage example

<!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>

Rendering:

How to use the transition-timing-function attribute

The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !

The above is the detailed content of How to use the transition-timing-function attribute. For more information, please follow other related articles on the PHP Chinese website!

php firefox chrome safari css3 webkit function transition

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use transition-delay attributeNext article：How to use transition-delay attribute

See more

How to use the transition-timing-function attribute

Related articles