面试题：CSS中transition属性的duration与timing - function的配合使用场景

Question

请举例说明在一个元素的过渡效果中，如何根据不同的需求，合理搭配duration（过渡持续时间）和timing - function（过渡时间函数）来实现特定的视觉效果，比如一个按钮在鼠标悬停时的过渡效果。

Answer 1

1. 线性过渡，较短持续时间：
   • 当希望按钮在鼠标悬停时快速且平稳地变化，可使用线性过渡时间函数linear和较短的duration。
   • 例如，在CSS中：

   button {
       background - color: #ccc;
       transition: background - color 0.2s linear;
   }
   button:hover {
       background - color: #007bff;
   }
   

   • 这里duration设置为0.2s，表示过渡在0.2秒内完成，linear时间函数让过渡过程匀速进行，给人一种简洁快速的视觉感受。
2. 缓动过渡，适中持续时间：
   • 若想要按钮的过渡更符合自然的加速减速效果，可使用缓动函数ease及适中的duration。
   • 示例代码：

   button {
       transform: scale(1);
       transition: transform 0.5s ease;
   }
   button:hover {
       transform: scale(1.1);
   }
   

   • duration为0.5s，提供了一个相对适中的过渡时长，ease函数使按钮在开始和结束时速度较慢，中间速度较快，模拟了自然的缓动效果，让过渡看起来更流畅、舒适。
3. 弹性过渡，较长持续时间：
   • 对于有弹性、活泼的过渡效果，可选用弹性时间函数cubic - bezier（或一些特定的预定义弹性函数如ease - in - out - elastic等，不过浏览器支持情况不同）和较长的duration。
   • 以下是使用cubic - bezier模拟弹性效果的例子：

   button {
       color: #333;
       transition: color 1s cubic - bezier(0.175, 0.885, 0.32, 1.275);
   }
   button:hover {
       color: #ff0000;
   }
   

   • duration设置为1s，给予足够时间展现弹性效果，cubic - bezier函数通过特定的控制点数值定义了弹性过渡的速度变化，让按钮颜色变化时仿佛有弹性回弹的感觉，增加趣味性。