在前端开发中，我们经常会使用动画效果来增强用户体验。而 CSS3 提供的过渡（transition）属性可以很好地实现动画效果。在 LESS 中，我们同样可以使用过渡属性来实现动画效果，下面就让我们来一步步学习如何在 LESS 中使用 CSS3 过渡属性。
CSS3 过渡属性简介
CSS3 过渡属性用来指定元素从一种样式逐渐变为另一种样式的过程。常用的 CSS3 过渡属性包括：
- transition-property：指定要过渡的 CSS 属性，如 transition-property:width;
- transition-duration：指定过渡的持续时间，如 transition-duration:3s;
- transition-timing-function：指定过渡的时间函数，如 transition-timing-function: ease-in-out;
- transition-delay：指定过渡的延迟时间，如 transition-delay:1s;
在 LESS 中使用 CSS3 过渡属性
在 LESS 中，只需要在 CSS3 过渡属性前面加上 transition: 即可，例如：
div {
transition: width 3s ease-in-out 1s;
}这个例子中，元素 div 的宽度将在 3 秒内从原来的宽度平滑过渡到新的宽度，过渡效果为先慢后快再慢，延迟时间为 1 秒。
如果要同时指定多个 CSS 属性进行过渡，可以使用 , 分隔不同的属性，例如：
div {
transition: width 3s ease-in-out 1s, height 2s ease-in 0.5s;
}这个例子中，元素 div 的宽度和高度将分别在不同的时间段内进行过渡。其中，宽度的过渡时间为 3 秒，过渡效果为先慢后快再慢，延迟时间为 1 秒；而高度的过渡时间为 2 秒，过渡效果为先慢后快，延迟时间为 0.5 秒。
LESS 变量简化 CSS3 过渡属性
在 LESS 中，我们可以使用变量来简化 CSS3 过渡属性的书写。例如：
@duration: 3s;
@delay: 1s;
@timing-function: ease-in-out;
div {
transition: width @duration @timing-function @delay;
}这个例子中，我们将过渡的持续时间、延迟时间和时间函数分别定义为变量，然后在 transition 属性中使用这些变量。这样做不仅可以简化代码的书写，还可以方便地修改过渡效果的参数，提高代码的可维护性和可复用性。
示例代码
下面是一个使用 LESS 中 CSS3 过渡属性实现动画效果的例子：
<head> <link rel="stylesheet/less" type="text/css" href="styles.less" /> </head> <body> <div class="box"></div> <script src="less.min.js" type="text/javascript"></script> </body>
-- -------------------- ---- ------- ---------- --- ------- --- ----------------- ------------ ---- - ------ ------ ------- ------ ----------------- ---- ----------- ----- --------- ---------------- ------- - ---------- - ------ ------ -
这个例子中，当鼠标经过元素 .box 时，它的宽度会在 3 秒内从 100px 平滑过渡到 300px，过渡效果为先慢后快再慢，延迟时间为 1 秒。
总结
CSS3 过渡属性可以很好地实现动画效果，而在 LESS 中，我们可以使用过渡属性来实现动画效果，并使用变量来简化代码的书写。通过本篇文章的学习，相信大家已经掌握了在 LESS 中使用 CSS3 过渡属性的方法，可以更加轻松地实现各种动画效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a52a4748841e98941a2c0b