transition

transition 是一个简写属性， transition-property 、 transition-duration 、 transiton-timing-funciton 、 transition-delay 是它的四个子属性。

  1. transition-property: 过渡属性(默认值为all)
  2. transition-duration: 过渡持续时间(默认值为0s)
  3. transiton-timing-function: 过渡函数(默认值为ease函数)
  4. transition-delay: 过渡延迟时间(默认值为0s)

其中 transition-duration 是必须的且不为 0s，其他不写可以是默认值。

transition-duration 和 transition-delay 都是数值，当 transiton 属性写两个数值的分别对应这两个属性，当只写一个时对应 transition-duration 而 transition-delay 为默认值。

transition 支持一个或多个属性，四个子属性用空格隔开，多个属性用逗号隔开。

  1. transition: width 1s ease 2s, background 1s ease 2s; // 过渡应用到 width 和 background

transition-property

应用过渡的属性

  1. none: 没有指定任何样式
  2. all: 默认值，表示指定元素所有支持transition-property属性的样式
  3. <transition-property>: 可过渡的样式，可用逗号分开写多个样式

不是所有的 css 属性都支持过渡的，查看 哪些属性支持 css 过渡。

  1. <style>
  2. .demo {
  3.   width: 100px;
  4.   height: 100px;
  5.   background: pink;
  6.   // 过渡 width
  7.   transition: width 1s;
  8. }
  10. .demo:hover {
  11.   width: 300px;
  12. }
  13. </style>
  15. <body>
  16.   <div class='demo'></div>
  17. </body>

transition-property.gif

transition-duration

过渡持续时间，默认值：0s（不过渡）。

注意：该值不能是负数，否则会失效没有过渡效果。

注意：该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间。

  1. <style>
  2. .demo {
  3.   width: 100px;
  4.   height: 100px;
  5.   background: pink;
  6.   transition-duration: 1s;
  7. }
  9. .demo:hover {
  10.   background: yellow;
  11. }
  12. </style>
  14. <body>
  15.   <div class='demo'></div>
  16. </body>

transition-duration.gif

transition-delay

过渡延迟时间，默认值：0s（不延迟）

注意：该值不能是负值，否则会失效没有延迟效果。

注意：该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间。

  1. // 上面的例子加上
  3. .demo {
  4.     transition-delay: 2s;
  5. }

transition-daley.gif

transition-timing-function

过渡时间函数，默认值：ease。

可以写三种的属性值：关键字、steps 函数、贝塞尔曲线（cubic-bezier）。

关键字

  1. ease: 开始和结束慢，中间快。相当于cubic-bezier(0.25,0.1,0.25,1)
  2. linear: 匀速。相当于cubic-bezier(0,0,1,1)
  3. ease-in: 开始慢。相当于cubic-bezier(0.42,0,1,1)
  4. ease-out: 结束慢。相当于cubic-bezier(0,0,0.58,1)
  5. ease-in-out: 和ease类似，但比ease幅度大。相当于cubic-bezier(0.42,0,0.58,1)
  6. step-start: 直接位于结束处。相当于steps(1,start)
  7. step-end: 位于开始处经过时间间隔后结束。相当于steps(1,end)

steps 函数

steps 步进函数用于让动画不连续，将过渡时间划分为等份大小来执行动画。

这个有点难理解，主要理解一下 start 和 end 的区别。

start：表示结束，分段结束了时间才开始走。

end：表示开始，分段开始的时候，时间也跟着走。

  1. <style>
  2. .demo {
  3.   width: 100px;
  4.   height: 100px;
  5.   background: pink;
  6.   transition-duration: 4s;
  7.   transition-timing-function: steps(2, start);
  8. }
  10. .demo:hover {
  11.   width: 300px;
  12. }
  13. </style>
  15. <body>
  16.     <div class='demo'></div>
  17. </body>
  19. <sript>
  20. var demo = document.getElementsByClassName('demo')
  21. demo[0].addEventListener('transitionend', () => {
  22.   console.log('动画结束')
  23. })
  24. </script>

观察 log 打印的时机。

贝塞尔曲线

这个没有了解过，以后补充。

参考：
[1] CSS动画简介
[2] 深入理解CSS过渡transition
[3] CSS3 animation属性中的steps功能符深入介绍