跳至主要內容

变换和动画属性

Kpsmart2025年3月4日大约 4 分钟

变换和动画属性

控制元素变换和动画效果的属性，包括 transform、transition、animation 等。

属性列表

下面是变换和动画属性的完整列表，点击属性名可跳转到 MDN 文档查看详细信息。

变换属性

属性名描述语法
transform应用 2D 或 3D 变换到元素transform: none | <transform-function>+
transform-origin设置变换的原点transform-origin: [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?
transform-style设置元素的子元素是位于 3D 空间中还是平面中transform-style: flat | preserve-3d
perspective设置用户与 z=0 平面的距离perspective: none | <length>
perspective-origin设置透视图的原点perspective-origin: [ <length-percentage> | left | center | right | top | bottom ]{1,2}
backface-visibility设置元素背面是否可见backface-visibility: visible | hidden

过渡属性

属性名描述语法
transition过渡属性的简写transition: <single-transition>#
transition-property指定应用过渡效果的 CSS 属性名称transition-property: none | <single-transition-property>#
transition-duration指定过渡效果的持续时间transition-duration: <time>#
transition-timing-function指定过渡效果的时间曲线transition-timing-function: <easing-function>#
transition-delay指定过渡效果开始的延迟时间transition-delay: <time>#

动画属性

属性名描述语法
animation动画属性的简写animation: <single-animation>#
animation-name指定 @keyframes 动画的名称animation-name: none | <keyframes-name>#
animation-duration指定动画完成一个周期所需的时间animation-duration: <time>#
animation-timing-function指定动画的时间曲线animation-timing-function: <easing-function>#
animation-delay指定动画开始的延迟时间animation-delay: <time>#
animation-iteration-count指定动画的播放次数animation-iteration-count: infinite | <number>#
animation-direction指定动画是否反向播放animation-direction: normal | reverse | alternate | alternate-reverse
animation-fill-mode指定动画执行前后如何应用样式animation-fill-mode: none | forwards | backwards | both
animation-play-state指定动画是运行还是暂停animation-play-state: running | paused

关键帧规则

规则名描述语法
@keyframes定义动画的关键帧@keyframes <keyframes-name> { <keyframe-block-list> }

使用示例

变换示例

/* 基本变换 */
.scale {
  transform: scale(1.5);
}

.rotate {
  transform: rotate(45deg);
}

.translate {
  transform: translate(50px, 100px);
}

.skew {
  transform: skew(10deg, 20deg);
}

/* 组合变换 */
.combined-transform {
  transform: translate(50px, 50px) rotate(45deg) scale(1.5);
  transform-origin: center center;
}

/* 3D 变换 */
.transform-3d {
  transform: perspective(500px) rotateY(45deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

过渡示例

/* 基本过渡 */
.transition-basic {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: all 0.3s ease;
}

.transition-basic:hover {
  width: 200px;
  height: 200px;
  background-color: red;
}

/* 多属性过渡 */
.transition-multiple {
  width: 100px;
  height: 100px;
  background-color: green;
  opacity: 1;
  transition: width 0.5s ease, height 0.5s ease 0.1s, background-color 0.5s linear 0.2s, opacity 0.5s;
}

.transition-multiple:hover {
  width: 200px;
  height: 200px;
  background-color: orange;
  opacity: 0.7;
}

动画示例

/* 基本动画 */
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

.animation-basic {
  animation: bounce 1s infinite;
}

/* 复杂动画 */
@keyframes pulse-fade {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animation-complex {
  animation-name: pulse-fade;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}

/* 多个动画 */
.animation-multiple {
  animation: 
    bounce 2s infinite,
    pulse-fade 3s ease-in-out infinite alternate;
}

实用动画效果

/* 淡入效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 1s forwards;
}

/* 抖动效果 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.shake {
  animation: shake 0.5s;
}

/* 脉冲效果 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.pulse {
  animation: pulse 1s infinite;
}

浏览器兼容性

大多数现代浏览器都支持这些变换和动画属性。需要注意：

  • 在某些旧版浏览器中，可能需要添加浏览器前缀（如 -webkit-、-moz-、-ms-）
  • 3D 变换在不同浏览器中的性能和渲染可能有差异
  • 复杂动画可能会影响性能，特别是在移动设备上

相关资源