CSS中转换样式属性怎么使用

CSS转换样式属性主要用于改变元素的形态、位置、大小以及实现动态过渡和动画效果，是前端页面交互开发的重要组成部分，常见的转换属性包含transform、transition和animation三类。

transform属性：元素形态变换

transform属性用于直接改变元素的形状、位置和大小，变换不会脱离文档流，也不会影响其他元素的布局。常用的变换函数包含平移、旋转、缩放、倾斜四类。

常用变换函数说明

transform使用示例

下面的代码实现一个div元素同时平移、旋转和缩放的效果：

/* 基础样式 */
.box {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  margin: 50px auto;
  /* 同时应用平移、旋转、缩放变换 */
  transform: translate(20px, 20px) rotate(30deg) scale(1.2);
  /* 设置变换原点为左上角 */
  transform-origin: left top;
}

transition属性：过渡动画

transition属性用于实现元素样式变化的平滑过渡效果，当元素的某个属性值发生改变时，不会瞬间切换，而是按照设定的时长和节奏完成变化。

transition子属性说明

• transition-property：指定需要过渡的CSS属性，取值为all表示所有可过渡属性都生效
• transition-duration：过渡持续时长，单位为s（秒）或ms（毫秒）
• transition-timing-function：过渡的速度曲线，常用值有linear（匀速）、ease（慢快慢）、ease-in（慢入）等
• transition-delay：过渡延迟执行的时间，默认0s

transition使用示例

下面的代码实现鼠标悬停在div上时，背景色和宽度平滑过渡的效果：

.transition-box {
  width: 100px;
  height: 100px;
  background-color: #2196F3;
  /* 简写形式：过渡属性 时长 速度曲线 延迟 */
  transition: all 0.3s ease 0s;
}

.transition-box:hover {
  width: 200px;
  background-color: #FF9800;
}

animation属性：关键帧动画

animation属性用于实现更复杂的自定义动画效果，通过定义关键帧来指定动画不同阶段的样式，可控制动画的循环次数、播放方向等。

关键帧定义语法

使用@keyframes规则定义动画的关键帧，指定动画开始、中间、结束阶段的样式：

/* 定义名为move-rotate的动画 */
@keyframes move-rotate {
  /* 动画开始状态 */
  0% {
    transform: translateX(0) rotate(0deg);
    background-color: #9C27B0;
  }
  /* 动画中间状态 */
  50% {
    transform: translateX(200px) rotate(180deg);
    background-color: #E91E63;
  }
  /* 动画结束状态 */
  100% {
    transform: translateX(400px) rotate(360deg);
    background-color: #9C27B0;
  }
}

animation使用示例

下面的代码将定义好的关键帧动画应用到元素上：

.animation-box {
  width: 80px;
  height: 80px;
  background-color: #9C27B0;
  /* 简写形式：动画名称 时长 速度曲线 延迟 循环次数 播放方向 */
  animation: move-rotate 2s linear 0s infinite normal;
}

使用注意事项

• transform的变换函数可以组合使用，顺序不同会导致最终效果不同，建议按照平移、旋转、缩放的顺序编写
• 不是所有CSS属性都支持transition过渡，比如display属性就无法过渡，需要过渡显示隐藏效果时建议使用opacity配合visibility
• animation动画播放完成后，元素默认会回到初始样式，若需要保持结束状态，可设置animation-fill-mode为forwards
• 频繁使用transform做动画性能优于修改top、left等属性，因为transform的变换会触发GPU加速，减少页面重排重绘

CSStransformtransitionanimation修改时间：2026-07-09 05:18:31