过渡属性

CSS3 的过渡属性提供了一种简单而强大的方式来创建平滑的动画效果。过渡允许我们在元素状态变化时，从一种样式逐渐过渡到另一种样式，而不是立即跳转。

transition 属性

transition 属性用于设置元素过渡效果的简写属性。

基本语法

transition: property duration timing-function delay;

参数说明

• property：要过渡的 CSS 属性
• duration：过渡持续时间
• timing-function：过渡速度曲线
• delay：过渡延迟时间

基本用法

/* 基本过渡 */
.basic-transition {
  transition: all 0.3s ease;
}

/* 指定属性 */
.property-transition {
  transition: background 0.3s ease;
}

/* 指定延迟 */
.delayed-transition {
  transition: all 0.3s ease 0.2s;
}

transition-property 属性

transition-property 属性用于指定要过渡的 CSS 属性。

基本用法

/* 过渡所有属性 */
.all-properties {
  transition-property: all;
}

/* 过渡指定属性 */
.specific-property {
  transition-property: background, color;
}

/* 过渡多个属性 */
.multiple-properties {
  transition-property: background, color, border;
}

可过渡属性

/* 颜色过渡 */
.color-transition {
  transition-property: color, background-color, border-color;
}

/* 尺寸过渡 */
.size-transition {
  transition-property: width, height, padding, margin;
}

/* 位置过渡 */
.position-transition {
  transition-property: top, left, right, bottom;
}

/* 变换过渡 */
.transform-transition {
  transition-property: transform;
}

transition-duration 属性

transition-duration 属性用于设置过渡的持续时间。

基本用法

/* 毫秒 */
.duration-ms {
  transition-duration: 300ms;
}

/* 秒 */
.duration-s {
  transition-duration: 0.3s;
}

/* 不同持续时间 */
.multiple-durations {
  transition-duration: 0.3s, 0.5s, 0.7s;
}

实际应用

/* 快速过渡 */
.fast-transition {
  transition-duration: 0.1s;
}

/* 中等过渡 */
.medium-transition {
  transition-duration: 0.3s;
}

/* 慢速过渡 */
.slow-transition {
  transition-duration: 0.5s;
}

transition-timing-function 属性

transition-timing-function 属性用于设置过渡的速度曲线。

预设值

/* 线性过渡 */
.linear {
  transition-timing-function: linear;
}

/* 缓动过渡 */
.ease {
  transition-timing-function: ease;
}

/* 缓入过渡 */
.ease-in {
  transition-timing-function: ease-in;
}

/* 缓出过渡 */
.ease-out {
  transition-timing-function: ease-out;
}

/* 缓入缓出过渡 */
.ease-in-out {
  transition-timing-function: ease-in-out;
}

贝塞尔曲线

/* 自定义贝塞尔曲线 */
.custom-bezier {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 弹性效果 */
.bounce {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 快速开始 */
.quick-start {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

/* 快速结束 */
.quick-end {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

阶梯函数

/* 阶梯过渡 */
.step-start {
  transition-timing-function: step-start;
}

.step-end {
  transition-timing-function: step-end;
}

.steps {
  transition-timing-function: steps(4, end);
}

transition-delay 属性

transition-delay 属性用于设置过渡的延迟时间。

基本用法

/* 无延迟 */
.no-delay {
  transition-delay: 0s;
}

/* 延迟过渡 */
.delayed {
  transition-delay: 0.2s;
}

/* 负延迟 */
.negative-delay {
  transition-delay: -0.1s;
}

实际应用

/* 延迟悬停效果 */
.hover-delayed {
  transition-delay: 0.1s;
}

/* 序列动画 */
.sequence {
  transition-delay: 0s, 0.2s, 0.4s, 0.6s;
}

实际应用案例

1. 按钮悬停效果

.button {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button-primary {
  background: linear-gradient(45deg, #007bff, #28a745);
  color: white;
}

.button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
  background: linear-gradient(45deg, #0056b3, #1e7e34);
}

.button-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

2. 卡片悬停效果

.card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card:hover .card-image {
  transform: scale(1.1);
}

3. 导航菜单效果

.nav-item {
  position: relative;
  padding: 10px 20px;
  cursor: pointer;
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #007bff;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.nav-item:hover::after {
  transform: scaleX(1);
}

.nav-item:hover {
  color: #007bff;
  transition: color 0.3s ease;
}

4. 输入框焦点效果

.input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 6px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.input::placeholder {
  color: #6c757d;
  transition: color 0.3s ease;
}

.input:focus::placeholder {
  color: transparent;
}

5. 模态框效果

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: white;
  border-radius: 12px;
  padding: 30px;
  max-width: 500px;
  width: 90%;
  transform: scale(0.8) translateY(-20px);
  transition: all 0.3s ease;
}

.modal.active .modal-content {
  transform: scale(1) translateY(0);
}

高级技巧

1. 多属性过渡

/* 不同属性不同持续时间 */
.multi-property {
  transition:
    background 0.3s ease,
    color 0.5s ease,
    transform 0.3s ease;
}

/* 不同属性不同速度曲线 */
.multi-timing {
  transition:
    background 0.3s ease,
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

2. 条件过渡

/* 仅在特定条件下过渡 */
.conditional-transition {
  transition: none;
}

.conditional-transition:hover {
  transition: all 0.3s ease;
  transform: translateY(-2px);
}

3. 性能优化

/* 使用 GPU 加速 */
.gpu-accelerated {
  transition: transform 0.3s ease;
  will-change: transform;
}

/* 避免性能问题 */
.optimized-transition {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

4. 响应式过渡

/* 响应式过渡 */
.responsive-transition {
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .responsive-transition {
    transition: all 0.2s ease;
  }
}

/* 移动端优化 */
.mobile-optimized {
  transition: none;
}

@media (min-width: 769px) {
  .mobile-optimized {
    transition: all 0.3s ease;
  }
}

浏览器兼容性

CSS3 过渡属性在所有现代浏览器中都有良好的支持：

• transition：Chrome 26+, Firefox 16+, Safari 9+, IE 10+
• transition-property：Chrome 26+, Firefox 16+, Safari 9+, IE 10+
• transition-duration：Chrome 26+, Firefox 16+, Safari 9+, IE 10+
• transition-timing-function：Chrome 26+, Firefox 16+, Safari 9+, IE 10+
• transition-delay：Chrome 26+, Firefox 16+, Safari 9+, IE 10+

最佳实践

1. 合理使用过渡

/* 推荐 - 合理的过渡 */
.button:hover {
  transition: all 0.3s ease;
  transform: translateY(-2px);
}

/* 不推荐 - 过度的过渡 */
.button:hover {
  transition: all 2s ease;
  transform: rotate(360deg);
}

2. 优化性能

/* 推荐 - 优化性能 */
.optimized {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 不推荐 - 影响性能 */
.unoptimized {
  transition: all 0.3s ease;
}

3. 提供降级方案

/* 推荐 - 提供降级方案 */
.button {
  transform: translateY(0);
}

@supports (transition: transform 0.3s ease) {
  .button:hover {
    transition: all 0.3s ease;
    transform: translateY(-2px);
  }
}

/* 不推荐 - 不提供降级方案 */
.button:hover {
  transition: all 0.3s ease;
  transform: translateY(-2px);
}

4. 考虑可访问性

/* 推荐 - 考虑可访问性 */
.button {
  transition: all 0.3s ease;
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}

/* 不推荐 - 不考虑可访问性 */
.button:hover {
  transition: all 0.3s ease;
  transform: translateY(-2px);
}

总结

CSS3 过渡属性提供了强大的动画效果创建能力：

主要属性：

• transition：过渡简写属性
• transition-property：过渡属性
• transition-duration：过渡持续时间
• transition-timing-function：过渡速度曲线
• transition-delay：过渡延迟时间

速度曲线：

• linear：线性过渡
• ease：缓动过渡
• ease-in：缓入过渡
• ease-out：缓出过渡
• ease-in-out：缓入缓出过渡
• cubic-bezier：自定义贝塞尔曲线

实际应用：

• 按钮悬停效果
• 卡片悬停效果
• 导航菜单效果
• 输入框焦点效果
• 模态框效果

最佳实践：

• 合理使用过渡
• 优化性能
• 提供降级方案
• 考虑可访问性
• 保持代码简洁

优势：

• 创建平滑动画
• 改善用户体验
• 提升交互性
• 减少JavaScript
• 优化性能

注意事项：

• 浏览器兼容性
• 性能影响
• 可访问性
• 用户体验
• 过度使用

掌握 CSS3 过渡属性，能够让我们创建更加流畅和自然的动画效果，大大提升网页的交互性和用户体验。