版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sakenc/article/details/87913766
动画–过渡函数 transition-timing-function
transition-timing-function属性指的是过渡的“缓动函数”。
主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：
ease:默认值，动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。
linear:线性速度。动画开始时的速度和结束时的速度一样（匀速）。
ease-in:动画开始的速度较慢，然后速度加快。
ease-out:动画开始的速度很快，然后速度减慢。
ease-in-out:动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度.
html
1
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>09动画--过渡函数 transition-timing-function</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</body>
</html>
2
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#wrapper{
width:1024px;
margin:0 auto;
}
.progress-bar{
height:40px;
width:40px;
background-color: #69c;
}
.progress-bar:hover{
width:960px;
}
#bar1{
-webkit-transition: width 5s linear;
}
#bar2{
-webkit-transition: width 5s ease;
}
#bar3{
-webkit-transition: width 5s ease-in;
}
#bar4{
-webkit-transition: width 5s ease-out;
}
#bar5{
-webkit-transition: width 5s ease-in-out;
}
</style>
</head>
<body>
<div id="wrapper">
<p>linear</p>
<div class="progress-bar" id="bar1"></div>
<p>ease</p>
<div class="progress-bar" id="bar2"></div>
<p>ease-in</p>
<div class="progress-bar" id="bar3"></div>
<p>ease-out</p>
<div class="progress-bar" id="bar4"></div>
<p>ease-in-out</p>
<div class="progress-bar" id="bar5"></div>
</div>
</body>
</html>
css
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 100px;
margin: 10px auto;
background: #900;
transition-property: border-radius;
-webkit-transition-property: -webkit-border-radius;
-moz-transition-property: -moz-border-radius;
transition-duration: .5s;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
transition-delay: .2s;/*transition-timing-function:ease;*/
/*transition-timing-function:linear;*/
/*transition-timing-function:ease-in; */
/*transition-timing-function:ease-out;*/
/*transition-timing-function:ease-in-out; */
}
div:hover {
border-radius: 100%;
}
.one {
transition-timing-function: ease;
}
.two {
transition-timing-function: linear;
}
.three {
transition-timing-function: ease-in;
}
.four {
transition-timing-function: ease-out;
}
.five {
transition-timing-function: ease-in-out;
}