CSS Transition

过渡 transition

transition属性用于设置元素的过渡动画交互效果

transition是一个简写属性（复合属性），用于设置四个过渡属性分别是transition-property、transition-duration、transition-timing-function、transition-delay。

transition: property duration timing-function delay;

属性值	默认值	描述
transition-property	all	设置过度效果的CSS属性名称
transition-duration	0s	设置完成过渡效果所需秒数或毫秒
transition-timing-function	ease	实现过渡效果的速度曲线
transition-delay	0s	设置过渡效果延时时长

transition: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>;

transition四个子属性中只有transition-duration属性是必须且不能为0的。

transition-duration和transition-delay都是时间。当两个时间同时出现时，第一个时间为transition-duration，第二个时间为transition-delay。当只有一个时间出现时为transition-duration，此时transition-delay则为默认值0。

transition的四个子属性不能使用逗号分隔，只能使用空格分隔，逗号分隔代表着不同的属性，空格分隔代表不同属性的四个子属性。

例如：当鼠标悬停元素时逐步改变元素的宽度

<style>
.wrapper{
  width:100px;
  height:100px;
  background-color:red;
  transition:width 2s;
}
.wrapper:hover{
  width:300px;
}
</style>

<div class="wrapper"></div>

transition:width 2s表示持续时间为2s，延迟时间为0。

例如：

.wrapper{
  width:100px;
  height:100px;
  background-color:red;
  transition:1s 2s;
}

transition:1s 2s表示持续时间为1s，延迟时间为2s。

过渡属性 transition-property

transition-property: none | all | <transition-property>[, <transition-property>]*;

属性值	描述
all	默认值，表示指定元素支持所有过渡属性样式。
none	表示没有指定任何样式
<transition-property>	用于设置过渡的样式，可使用逗号分隔多个。

在CSS中并非所有属性都可以设置为过渡属性，只有具有中间值的属性才可以设置为过渡属性。

具有中间值的CSS属性

• 颜色
  color、background-color、border-color、outline-color
• 位置
  background-position、left、right、top、bottom
• 长度
  width、height、max-width、min-width、max-height、min-height
  margin、padding、border-width、outline-width、outline-offset
  line-height、vertical-align、text-indent、font-size
  border-spacing、letter-spacing、word-spacing
• 数字
  opacity、visibility、z-index、font-weight、zoom
• 组合
  transform、box-shadow、text-shadow、clip
• 其它
  gradient

过渡持续时间transition-duration

transition-duration不能设置为负值，其默认值为0s，若为0则为无效值，必须带单位。

transition-duration: <time>[, <time>]*;

过渡延迟时间transition-delay

transition-delay定义元素属性延迟多长时间后才开始执行过渡效果，其单位为秒或毫秒。

transition-delay: <time>[, <time>]*;

transition-delay属性值若为负值则无效果，过渡元素的起始值会从0开始变为设定值，即设定值 = 延迟时间+持续时间。若设定值小于等于0则无效果，若设定值大于0则表示过渡元素从该设定值开始完成剩余过渡效果。

过渡时间函数transition-timing-function

transition-timing-function用于定义元素过渡属性随着时间变化时的过渡速度变化效果

transition-timing-function: <timing-function>[, <timing-function>]*;

transition-timing-function取值包括三种分别是关键词、steps步进函数、bezier曲线函数，其默认值为ease。

关键字

关键字实际上bezier函数或steps函数的特殊值

关键字	描述	原型
ease	开始和结束慢中间快	cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in	开始慢	cubic-bezier(0, 0, 1, 1)
ease-out	结束慢	cubic-bezier(0, 0, 0.58, 1)
ease-in-out	开始和结束慢中间快，比ease幅度打。	cubic-bezier(0.42, 0, 0.58, 1)
linear	匀速	cubic-bezier(0, 0, 1, 1)
step-start	直接位于结束处	steps(1, start)
step-end	位于开始处经过间隔时间后结束	steps(1, end)

步进函数steps

steps步进函数会将过渡时间划分为大小相等的时间间隔来运行

steps(<integer>[, start | end]?)

函数参数	描述
integer	表示用于指定间隔的个数，只能是正整数。
start	可选，表示开始不保持。
end	可选，表示开始值保持一次。

steps

贝塞尔曲线函数bezier

bezier贝塞尔曲线通过p0到p3四个控制点来实现，其中p0表示坐标(0,0)，p3表示坐标(1,1)。

transition-timing-function通过确定p1(x1, y1)和p2(x2, y2)两点的值来确定贝塞尔曲线函数

bezier

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

x1、x2、y1、y2都是包括0到1的数值

例如：cubic-bezier(.17, .67, .83, .67)