精通CSS过渡效果：打造赏心悦目的动画体验

2023-12-18 19:46:07

CSS transition：让网页动起来

CSS transition，又称CSS过渡效果，是一种将CSS属性值从初始状态平滑过渡到结束状态的技术。当用户与网页上的元素交互时，transition会让元素的属性值以平滑的方式发生变化，而不是瞬间跳跃，从而营造出一种视觉上更具吸引力的动画效果。

transition的应用场景非常广泛，例如：

元素悬停时，背景色的渐变
元素点击时，边框颜色的改变
元素滚动时，透明度的变化
元素加载时，渐显或渐隐效果

transition的语法

transition的语法非常简单，基本格式如下：

transition: property duration timing-function delay;

其中：

property：要应用过渡效果的CSS属性，例如background-color、opacity、transform等。
duration：过渡效果的持续时间，可以是数字（单位为秒）或百分比（相对于动画元素的持续时间）。
timing-function：过渡效果的缓动函数，用于控制过渡效果的速度变化。常见的缓动函数包括ease、ease-in、ease-out、ease-in-out等。
delay：过渡效果的延迟时间，可以是数字（单位为秒）或百分比（相对于动画元素的持续时间）。

transition的应用实例

下面是一个简单的示例，展示如何使用transition实现元素悬停时背景色的渐变：

.box {
  width: 100px;
  height: 100px;
  background-color: #ffffff;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: #000000;
}