transition的属性及值
transition-property:指定应用过度属性的名称 默认值为all 表示所有可被动画的属性都表现出过度动画 可指定多个property； none：没有过度动画；all：所有可被动画的属性都表现出过度动画； IDENT：属性名称（可以指定多个）
transition-duration:属性以秒或毫秒为单位指定过度动画所需的时间。 默认值为0s，表示不出现过渡动画。可以指定多个时长，每个时长会被应用到由transition-property指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。 如果时长列表更长，那么该列表会被裁剪。两种情况下，属性列表都保持不变。 属性值：以秒或者毫秒为单位 不接受负值，必须带单位。
transition-timing-function:css属性受到transition的影响，会产生不断变化的中间值，而css transition-timing-function属性用来描述 这个中间是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。
默认值：ease
你可以规定多个timing function,通过使用transition-property属性，可以根据主列表（transition-property的列表）给每个css属性应用相应的timing function ；如果timing fucntion 的个数比主列表中数量少，缺少的值被设置为初始值（ease）。如果timing function 比主列表要多，timign functioin函数列表会被截断至合适的大小。这两种情况下声明的css属性都是有效的。
属性值：
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:等同于stteps(1,start)
step-end:等同于steps(1,end)
step(,[,[start|end]]?)
第一个参数：必须为正整数，指定函数的步数
第二个参数:指定每一步的值发生变化的时间点（默认值end）*/
<style>
.box {
width: 200px;
height: 200px;
background-color: dodgerblue;
transition-property: width, height; /*设置宽高过渡的属性*/
transition-duration: 5s, 3s; /*设置与 transition-property 对应的过渡时间*/
transition-delay: 1s; /* 设置延迟时间为 1s */
transition-timing-function: ease; /* 设置过渡类型,默认为 ease(先加速后减速) */
}
.box:hover { /*在鼠标移入的时候修改宽高*/
width: 400px;
height: 400px;
}
</style>
<body>
<div class="box"></div>
</body>
1907
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
