|
|
|
|
|
CSS3 animation
屬性animation-timing-function
定義了動畫的播放速度曲線。
該屬性值有6個可選,它們各不相同,主要表現(xiàn)在運動速度(曲線)方面的差異:
animation-timing-function
可使用貝塞爾(Cubic Bezier)函數(shù)的數(shù)學函數(shù),來生成速度曲線,也可以預定義的值:
值 | 描述 |
---|---|
linear | 動畫從頭到尾的速度是相同的。 |
ease | 默認。動畫以低速開始,然后加快,在結束前變慢。 |
ease-in | 動畫以低速開始。 |
ease-out | 動畫以低速結束。 |
ease-in-out | 動畫以低速開始和結束。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函數(shù)中自己的值??赡艿闹凳菑?0 到 1 的數(shù)值。 |
下圖一目了然看出了這6個屬性值之間的不同。
實例代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>animation-timing-function</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style id="compiled-css" type="text/css">
html,body,div {
margin: 50px 50px;
padding: 0;
background:#eee;
}
.container {
position: relative;
width: 2000px;
height: 2000px;
}
.balloon {
position: relative;
width: 80px;
height: 80px;
margin: 0 20px;
left:0;
text-align: center;
font-size: 12px;
line-height: 80px;
border-radius: 80px;
color: rgb(247, 133, 2);
background-color: rgba(218, 165, 165, 0.5);
}
.container .balloon:nth-child(3n) {
background-color: rgba(255, 222, 173, 0.218);
}
.container .balloon:nth-child(3n-1) {
background-color: rgba(0, 250, 154, 0.555);
}
.container .balloon:nth-child(3n-2) {
background-color: rgba(147, 112, 216, 0.418);
}
.container:hover .default{
left: 300px;
/** 過渡屬性*/
transition-property: left;
/** 過渡時長*/
transition-duration: 5s;
}
.container:hover .linear{
left: 300px;
/** 過渡屬性*/
transition-property: left;
/** 過渡時長*/
transition-duration: 5s;
/** 過渡方式*/
transition-timing-function: linear;
}
.container:hover .ease{
left: 300px;
/** 過渡屬性*/
transition-property: left;
/** 過渡時長*/
transition-duration: 5s;
/** 過渡方式*/
transition-timing-function: ease;
}
.container:hover .ease-in{
left: 300px;
/** 過渡屬性*/
transition-property: left;
/** 過渡時長*/
transition-duration: 5s;
/** 過渡方式*/
transition-timing-function: ease-in;
}
.container:hover .ease-out{
left: 300px;
/** 過渡屬性*/
transition-property: left;
/** 過渡時長*/
transition-duration: 5s;
/** 過渡方式*/
transition-timing-function: ease-out;
}
.container:hover .ease-in-out{
left: 300px;
/** 過渡屬性*/
transition-property: left;
/** 過渡時長*/
transition-duration: 5s;
/** 過渡方式*/
transition-timing-function: ease-in-out;
}
.container:hover .cubic-bezie{
left: 300px;
/** 過渡屬性*/
transition-property: left;
/** 過渡時長*/
transition-duration: 5s;
/** 過渡方式*/
transition-timing-function: cubic-bezie(0.59,-0.62,0.06,0.84);
}
</style>
</head>
<body>
<div class="container">
<div class="balloon default ">default</div>
<div class="balloon linear ">linear</div>
<div class="balloon ease ">ease</div>
<div class="balloon ease-in ">ease-in</div>
<div class="balloon ease-out ">ease-out</div>
<div class="balloon ease-in-out ">ease-in-out</div>
<div class="balloon cubic-bezie ">cubic-bezie</div>
</div>
</body>
</html>
關于animation
屬性 linear/ease/ease-in/ease-out/ease-in-out,我們還可以通過此文來了解更多: