2D过渡模块的其他属性

官网上关于过渡属性的值:

属性 描述 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 >

猜你喜欢

转载自www.cnblogs.com/-Tony/p/9190434.html