1. transition-property
默认值为 all，表示所有可被动画的属性都表现出过渡动
可以指定多个 property
属性值：
none
没有过渡动画。
all
所有可被动画的属性都表现出过渡动画。
IDENT
属性名称 （可以指定多个）
transition-property: width,height;
transition-duration: 9s,1s;
2 transition-duration
属性以秒或毫秒为单位指定过渡动画所需的时间。
默认值为 0s ，表示不出现过渡动画。
可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。
属性值
以毫秒或秒为单位的数值
<time> 类型。表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 0s ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。一定要加单位(不能写0 一定要写0s 1s,0s,1s)！
transition-property:width,background;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition-property</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
margin: auto;
background: pink;
transition-property:width,background;
transition-duration:3s;
}
div:hover {
cursor: pointer;
width: 600px;
height: 600px;
background: deeppink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
transition
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test{
width: 200px;
height: 200px;
border-radius:50%;
border:3px solid red;
background: pink;
text-align: center;
font: 50px/200px "微软雅黑" ;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition:3s;
}
html{
height: 100%;
}
html body{
height: 60%;
border: 3px solid yellow;
margin-top: 100px;
}
body:hover #test{
width: 100px;
height: 100px;
font: 30px/100px "微软雅黑";
}
</style>
</head>
<body>
<div id="test">
主页
</div>
</body>
</html>
3 transition-delay
transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。
默认值：0s
你可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变
属性值
值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。
transition-delay:1s;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test{
width: 200px;
height: 200px;
border:3px solid red;
background: pink;
text-align: center;
font: 50px/200px "微软雅黑" ;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: width,height;
transition-duration: 9s,1s;
transition-delay:1s;
}
html{
height: 100%;
}
html body{
height: 60%;
border: 3px solid yellow;
margin-top: 100px;
}
body:hover #test{
width: 100px;
height: 100px;
font: 30px/100px "微软雅黑";
}
</style>
</head>
<body>
<div id="test">
主页
</div>
</body>
</html>
transition-delay
4 transition-timing-function:过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变
默认值：ease
1、ease：（加速然后减速）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier： 贝塞尔曲线
7、step-start：等同于steps(1,start)
step-end：等同于steps(1,end)
steps(<integer>,[,[start|end]]?)
第一个参数：必须为正整数，指定函数的步数
第二个参数：指定每一步的值发生变化的时间点（默认值end）
transition-timing-function: inherit;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test{
width: 200px;
height: 200px;
border:3px solid red;
background: pink;
text-align: center;
font: 50px/200px "微软雅黑" ;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: width,height;
transition-duration: 9s,1s;
transition-timing-function: inherit;
}
html{
height: 100%;
}
html body{
height: 60%;
border: 3px solid yellow;
margin-top: 100px;
}
body:hover #test{
width: 100px;
height: 100px;
font: 30px/100px "微软雅黑";
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>
属性值列表长度不一致时：
超出的情况下是会被全部截掉的
不够的时候，关于时间的会重复列表，transition-timing-function的时候使用的是默认值ease
检测过渡是否完成：
当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd
（每一个拥有过渡的属性在其完成过渡时都会触发一次transitionend事件）
在transition完成前设置 display: none，事件同样不会被触发
支持属性 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties
原文地址：https://www.cnblogs.com/hack-ing/p/11776273.html