CSS 过渡

过渡简介

CSS过渡（Transition）用于在元素状态变化时创建平滑的动画效果。

基本语法

.element {
  transition: property duration timing-function delay;
}

过渡属性

1. transition-property（过渡属性）

.element {
  transition-property: all;       /* 所有属性 */
  transition-property: width;      /* 宽度 */
  transition-property: width, height; /* 多个属性 */
  transition-property: none;      /* 无属性 */
}

2. transition-duration（过渡时间）

.element {
  transition-duration: 0.5s;      /* 0.5秒 */
  transition-duration: 500ms;     /* 500毫秒 */
  transition-duration: 1s, 0.5s;  /* 多个时间 */
}

3. transition-timing-function（过渡函数）

.element {
  transition-timing-function: ease;         /* 默认 */
  transition-timing-function: linear;       /* 线性 */
  transition-timing-function: ease-in;       /* 加速 */
  transition-timing-function: ease-out;     /* 减速 */
  transition-timing-function: ease-in-out;  /* 加速减速 */
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

4. transition-delay（过渡延迟）

.element {
  transition-delay: 0s;       /* 无延迟 */
  transition-delay: 0.5s;     /* 0.5秒延迟 */
  transition-delay: 1s, 0.5s; /* 多个延迟 */
}

5. transition（简写）

.element {
  transition: all 0.5s ease 0s;
  transition: width 0.5s ease-in-out 0s;
  transition: width 0.5s, height 0.5s;
}

常用过渡效果

1. 颜色过渡

.button {
  background-color: #007bff;
  color: white;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
}

2. 尺寸过渡

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

.box:hover {
  width: 200px;
  height: 200px;
}

3. 位置过渡

.box {
  position: relative;
  left: 0;
  transition: left 0.5s ease;
}

.box:hover {
  left: 50px;
}

4. 透明度过渡

.box {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.box:hover {
  opacity: 0.5;
}

5. 变换过渡

.box {
  transform: scale(1);
  transition: transform 0.5s ease;
}

.box:hover {
  transform: scale(1.2);
}

6. 阴影过渡

.box {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}

.box:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

实际应用

1. 按钮悬停效果

.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.button:active {
  transform: translateY(0);
}

2. 卡片悬停效果

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

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

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

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

3. 导航菜单效果

.nav-item {
  position: relative;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: white;
  transition: width 0.3s ease;
}

.nav-item:hover::after {
  width: 100%;
}

4. 输入框焦点效果

.input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

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

5. 模态框效果

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

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

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

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

过渡函数详解

1. ease（默认）

.element {
  transition-timing-function: ease;
}

开始慢，中间快，结束慢。

2. linear（线性）

.element {
  transition-timing-function: linear;
}

匀速运动。

3. ease-in（加速）

.element {
  transition-timing-function: ease-in;
}

开始慢，逐渐加速。

4. ease-out（减速）

.element {
  transition-timing-function: ease-out;
}

开始快，逐渐减速。

5. ease-in-out（加速减速）

.element {
  transition-timing-function: ease-in-out;
}

开始慢，中间快，结束慢。

6. cubic-bezier（自定义）

.element {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

自定义贝塞尔曲线。

性能优化

1. 使用 transform 和 opacity

.element {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.element:hover {
  transform: translateX(10px);
  opacity: 0.8;
}

2. 避免使用 width 和 height

.element {
  transform: scaleX(1);
  transition: transform 0.3s ease;
}

.element:hover {
  transform: scaleX(1.2);
}

3. 使用 will-change

.element {
  will-change: transform, opacity;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

面试常见问题

1. CSS 过渡的属性有哪些？

• transition-property: 过渡属性
• transition-duration: 过渡时间
• transition-timing-function: 过渡函数
• transition-delay: 过渡延迟

2. ease 和 linear 的区别？

• ease: 开始慢，中间快，结束慢
• linear: 匀速运动

3. 如何优化过渡性能？

• 使用 transform 和 opacity
• 避免使用 width 和 height
• 使用 will-change 提示浏览器

4. 如何实现按钮悬停效果？

.button {
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}

5. cubic-bezier 的作用是什么？

cubic-bezier 用于自定义过渡函数，创建更复杂的动画效果。

.element {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

通过理解CSS过渡的各种属性和应用，可以创建平滑的动画效果。