官网上关于过渡属性的值:
属性 | 描述 | CSS |
---|---|---|
transition | 简写属性,用于在一个属性中设置四个过渡属性。 | 3 |
transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
transition-timing-function 的值 有一下特点:
值 | 描述 |
---|---|
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))。 |
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
<
style
>
*{
margin:
0;
padding:
0;
}
/*布局基本样式 */
ul{
width:
1000px;
height:
600px;
background-color:
beige;
margin:
100px
auto;
list-style:
none;
}
ul li{
width:
150px;
height:
100px;
background-color:
pink;
margin-top:
10px;
line-height:
100px;
text-align:
center;
/* 添加需要过渡的属性 */
transition-property: margin-left;
/* 添加时间 */
transition-duration:
5s;
}
/* 鼠标移入 ul 添加统一效果 */
ul:hover li{
margin-left:
800px;
}
/* 添加各自的样式效果 */
ul li:nth-child(
1
){
transition-timing-function:
linear;
}
ul li:nth-child(
2
){
transition-timing-function:
ease;
}
ul li:nth-child(
3
){
transition-timing-function:
ease-in;
}
ul li:nth-child(
4
){
transition-timing-function:
ease-out;
}
ul li:nth-child(
5
){
transition-timing-function:
ease-in-out;
}
<
/
style
>
</
head
>
<
body
>
<
ul
>
<
li
>liner
</
li
>
<
li
>ease
</
li
>
<
li
>ease-in
</
li
>
<
li
>ease-out
</
li
>
<
li
>ease-in-out
</
li
>
</
ul
>
</
body
>
</
html
>
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
<
style
>
*{
margin:
0;
padding:
0;
}
/*布局基本样式 */
ul{
width:
1000px;
height:
600px;
background-color:
beige;
margin:
100px
auto;
list-style:
none;
}
ul li{
width:
150px;
height:
100px;
background-color:
pink;
margin-top:
10px;
line-height:
100px;
text-align:
center;
/* 添加需要过渡的属性 */
transition-property: margin-left;
/* 添加时间 */
transition-duration:
5s;
}
/* 鼠标移入 ul 添加统一效果 */
ul:hover li{
margin-left:
800px;
}
/* 添加各自的样式效果 */
ul li:nth-child(
1
){
transition-timing-function:
linear;
}
ul li:nth-child(
2
){
transition-timing-function:
ease;
}
ul li:nth-child(
3
){
transition-timing-function:
ease-in;
}
ul li:nth-child(
4
){
transition-timing-function:
ease-out;
}
ul li:nth-child(
5
){
transition-timing-function:
ease-in-out;
}
<
/
style
>
</
head
>
<
body
>
<
ul
>
<
li
>liner
</
li
>
<
li
>ease
</
li
>
<
li
>ease-in
</
li
>
<
li
>ease-out
</
li
>
<
li
>ease-in-out
</
li
>
</
ul
>
</
body
>
</
html
>