CSS3过渡 - 平滑属性变化动画效果

最后编辑于2025-04-14 12:12:41.6241698 +0800 CST

CSS3 过渡

CSS3过渡(transition)允许你在一定的时间内平滑地改变属性值，而不是立即生效，从而创造出动画效果。

浏览器支持

下表显示了主要浏览器对CSS3过渡的支持情况：

属性 Chrome IE Firefox Safari Opera
transition 26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-

CSS3 过渡属性

CSS3过渡包括以下几个属性：

  • transition-property - 指定应用过渡效果的CSS属性名称
  • transition-duration - 指定完成过渡所需的时间
  • transition-timing-function - 指定过渡效果的速度曲线
  • transition-delay - 指定过渡效果开始的延迟时间
  • transition - 简写属性，用于同时设置四个过渡属性

transition-property

transition-property属性指定应用过渡效果的CSS属性名称。

css 
1div {
2    transition-property: width;
3}

可以指定多个属性，用逗号分隔：

css 
1div {
2    transition-property: width, height, background-color;
3}

如果要应用过渡效果到所有属性，可以使用all值：

css 
1div {
2    transition-property: all;
3}

transition-duration

transition-duration属性指定完成过渡效果所需的时间，以秒(s)或毫秒(ms)为单位。

css 
1div {
2    transition-duration: 2s;
3}

可以为多个属性指定不同的持续时间：

css 
1div {
2    transition-property: width, height;
3    transition-duration: 2s, 4s;
4}

transition-timing-function

transition-timing-function属性指定过渡效果的速度曲线，控制过渡期间的加速和减速方式。

css 
1div {
2    transition-timing-function: ease;
3}

常用的速度曲线包括：

  • linear - 匀速过渡
  • ease - 慢开始，然后快，然后慢结束（默认）
  • ease-in - 慢开始
  • ease-out - 慢结束
  • ease-in-out - 慢开始和慢结束
  • cubic-bezier(n,n,n,n) - 自定义贝塞尔曲线
css 
1div {
2    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
3}

transition-delay

transition-delay属性指定过渡效果开始前的等待时间，以秒(s)或毫秒(ms)为单位。

css 
1div {
2    transition-delay: 0.5s;
3}

可以为多个属性指定不同的延迟时间：

css 
1div {
2    transition-property: width, height;
3    transition-delay: 0s, 1s;
4}

transition简写属性

transition是一个简写属性，用于同时设置四个过渡属性：

css 
1div {
2    /* property duration timing-function delay */
3    transition: width 2s linear 0.5s;
4}

可以指定多个过渡效果，用逗号分隔：

css 
1div {
2    transition: width 2s, height 4s ease-in, background-color 1s ease-out 0.5s;
3}

基本过渡示例

下面是一个基本的CSS3过渡示例，当鼠标悬停在元素上时改变其宽度和背景颜色：

css 
 1div {
 2    width: 100px;
 3    height: 100px;
 4    background: red;
 5    transition: width 2s, background 1s;
 6}
 7
 8div:hover {
 9    width: 300px;
10    background: blue;
11}

实际应用示例

1. 按钮悬停效果

css 
 1.button {
 2    padding: 10px 20px;
 3    background-color: #4CAF50;
 4    color: white;
 5    border: none;
 6    border-radius: 4px;
 7    cursor: pointer;
 8    transition: background-color 0.3s, transform 0.2s;
 9}
10
11.button:hover {
12    background-color: #45a049;
13    transform: scale(1.05);
14}
15
16.button:active {
17    transform: scale(0.98);
18}

2. 导航菜单下划线效果

css 
 1.nav-link {
 2    position: relative;
 3    color: #333;
 4    text-decoration: none;
 5    padding: 5px 0;
 6}
 7
 8.nav-link::after {
 9    content: '';
10    position: absolute;
11    bottom: 0;
12    left: 0;
13    width: 0;
14    height: 2px;
15    background-color: #333;
16    transition: width 0.3s;
17}
18
19.nav-link:hover::after {
20    width: 100%;
21}

3. 图片卡片展开效果

css 
 1.card {
 2    width: 300px;
 3    height: 200px;
 4    overflow: hidden;
 5    position: relative;
 6}
 7
 8.card img {
 9    width: 100%;
10    height: 100%;
11    object-fit: cover;
12    transition: transform 0.5s;
13}
14
15.card-content {
16    position: absolute;
17    bottom: -100px;
18    left: 0;
19    width: 100%;
20    background-color: rgba(0, 0, 0, 0.7);
21    color: white;
22    padding: 20px;
23    transition: bottom 0.5s;
24}
25
26.card:hover img {
27    transform: scale(1.1);
28}
29
30.card:hover .card-content {
31    bottom: 0;
32}

4. 折叠面板

css 
 1.accordion {
 2    overflow: hidden;
 3}
 4
 5.accordion-header {
 6    padding: 15px;
 7    background-color: #f5f5f5;
 8    cursor: pointer;
 9}
10
11.accordion-content {
12    max-height: 0;
13    overflow: hidden;
14    transition: max-height 0.4s ease-out;
15}
16
17.accordion.active .accordion-content {
18    max-height: 200px;
19}

过渡的局限性

虽然CSS3过渡非常有用，但它也有一些局限性：

  1. 只能定义开始状态和结束状态，无法定义中间状态
  2. 无法创建循环动画（除非通过JavaScript不断触发）
  3. 必须由触发事件（如hover、focus或JavaScript修改）启动
  4. 不是所有的CSS属性都能过渡，例如display属性

对于更复杂的动画效果，可以考虑使用CSS3动画（animation）。

CSS3过渡属性总结

属性 描述 默认值
transition-property 指定过渡的属性 all
transition-duration 指定过渡的持续时间 0s
transition-timing-function 指定过渡的速度曲线 ease
transition-delay 指定过渡的延迟时间 0s
transition 简写属性 -