css中的过渡Transition

css中的过渡Transition

过渡Transition（property duration timing-function delay）属性有：

• transition-property：指定css属性的名字来应用transition效果。比如：width
• transition-duration：指定过渡效果需要过久来完成。需要始终指定该属性值，否则没有任何效果。因为默认值为0
• transition-timing-function：指定过渡效果的曲线
• transition-delay：指定过渡效果延迟过久开始

简单示例

指定多个属性已逗号分隔。
比如：

.hover {
    width: 100px;
    height: 200px;
    border: 1px solid;
    transition: width 8s ease, transform 5s ease-in-out;
}

.hover:hover {
    transform: rotate(90deg);
    width: 200px;
}

当鼠标移上时过渡开始，width和transform使用指定过渡效果到达最终的属性值。

过渡函数steps

对于过渡函数这里特别指出steps。step-start等价于steps(1,start)，step-end等价于steps(1,end)。
steps第一个参数是过渡效果分几次来完成。指定start和end的区别在于开始和结束是否计算在内。比如：

transition: width 8s steps(1, end)

过渡一次完成，指定为end。表示过渡效果直接开始，在开始的地方不会停一次。

transition: width 8s steps(1, start)

过渡一次完成，指定为start。表示过渡效果在开始的地方会停一次，由于一次完成则看起来没有任何效果。

如何触发过渡

触发分为：

• 伪类触发 比如 :hover : focus :checked :active
• js触发就是toggleClass
  注意：transitoin 只支持transitoinend事件