前端学习：交互式动效设计

import ’./transitions.css’

transform#

2D转换#

平移#

平移 (translate) 可以在水平方向和垂直方向上移动元素，不改变元素的布局。示例代码：

1
.translate {
2
  /* x y 同时平移 */
3
  transform: translate(50px, 100px);
4
  /* 或者分别设置水平和垂直方向的平移，可使用百分比（相对于元素自身的宽度和高度） */
5
  transform: translateX(50px);
6
  transform: translateY(50%);
7
}

旋转#

旋转 (rotate) 可以围绕元素的中心点旋转元素。示例代码：

1
.rotate {
2
  /* 旋转角度，正值表示顺时针旋转，负值表示逆时针旋转 */
3
  transform: rotate(45deg);
4
  /* 指定旋转的中心点，默认是元素的中心点 */
5
  transform-origin: left top;
6
  /* 也可以使用百分比和px单位，50% 50% 表示元素的中心点 */
7
  transform-origin: 50% 50%;
8
}

缩放#

缩放 (scale) 可以增加或减少元素的尺寸。示例代码：

1
.scale {
2
  /* 同时设置水平和垂直方向的缩放比例 */
3
  transform: scale(2, 2);
4
  /* 或者分别设置水平和垂直方向的缩放比例 */
5
  transform: scaleX(2);
6
  transform: scaleY(2);
7
}

倾斜#

倾斜 (skew) 可以在水平方向和垂直方向上倾斜元素。示例代码：

1
.skew {
2
  /* 同时设置水平和垂直方向的倾斜角度，如果只设置一个值，默认是水平方向的倾斜角度 */
3
  transform: skew(45deg, 45deg);
4
  /* 或者分别设置水平和垂直方向的倾斜角度 */
5
  transform: skewX(45deg);
6
  transform: skewY(45deg);
7
}

过渡#

过渡 (transition) 可以为元素的变化添加平滑的动画效果。示例代码：

1
.transition {
2
  /* 为所有属性添加过渡效果 */
3
  transition: all 0.3s ease-in-out;
4
  /* 或者为特定属性添加过渡效果 */
5
  transition: transform 0.3s ease-in-out;
6
}

常见的速度曲线：

ease：默认值，先慢后快
linear：匀速
ease-in：先慢后快
ease-out：先快后慢
ease-in-out：先慢后快再慢
cubic-bezier：自定义贝塞尔曲线

鼠标悬停查看动画效果

ease
(default)

ease-in

ease-out

ease-in-out

linear

复合变换#

transform 可以同时应用多个变换，多个变换之间用空格隔开，执行顺序是从右到左。示例代码：

1
.transform {
2
  transform: translate(50px, 100px) rotate(45deg) scale(2, 2);
3
}

3D转换#

旋转#

旋转 (rotate) 可以改变元素在 3D 空间中的角度。示例代码：

1
.rotate {
2
  /* 3D 旋转，参数为 x y z 轴的旋转角度 */
3
  transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
4
}

加上透视效果，就能模拟 3D 空间中的近大远小的旋转效果。示例代码：

1
.rotate {
2
  /* 3D 旋转，perspective 表示透视距离，rotateX 表示绕 x 轴旋转 */
3
  transform: perspective(500px) rotateY(45deg);
4
}

还可使用 backface-visibility 来控制元素的背面是否可见。示例代码：

1
.backface-visibility {
2
  /* 元素的背面不可见 */
3
  backface-visibility: hidden;
4
}

位移#

同样的，3D 位移也可以使用 translateX、translateY、translateZ 或 translate3d 来实现，结合 perspective 可以实现 3D 空间中的位移效果，实现近大远小的位移效果。示例代码：

1
.translate {
2
  /* 3D 位移，perspective 表示透视距离，translateX 表示在 x 轴上的位移 */
3
  transform: perspective(500px) translate3d(50px, 50px, 50px);
4
}

也可以开启父容器的 perspective 属性，来实现 3D 空间中的位移效果。示例代码：

1
.parent {
2
  /* 开启 3D 变换 */
3
  transform-style: preserve-3d;
4
  /* 开启父容器的透视效果 */
5
  perspective: 500px;
6
}

动画#

关键帧动画#

关键帧（Keyframe）是动画和视频制作中用于定义动作或状态变化的核心节点，它决定了动画的起始、转折和结束状态。中间帧（插帧）通过算法自动生成，形成连贯的动画效果。

动画的使用：先定义关键帧，再应用动画。示例代码：

1
@keyframes move {
2
  0% {
3
    transform: translateX(0);
4
  }
5
  50% {
6
    transform: translateX(50px);
7
  }
8
  100% {
9
    transform: translateX(100px);
10
  }
11
}
12
.box {
13
  /* 应用动画 */
14
  animation: move 2s ease-in-out;
15
}

定义关键帧也可以使用 from 和 to 关键字，示例代码：

1
@keyframes move {
2
  from {
3
    transform: translateX(0);
4
  }
5
  to {
6
    transform: translateX(100px);
7
  }
8
}

animation 是应用动画的属性，示例代码：

1
.box {
2
  /* animation: 动画名称 动画时长 速度曲线 延迟时间 播放次数 播放方向 执行完毕状态
3
     动画名称和动画时长是必填项，其他属性是可选的 */
4
  animation: move 2s ease-in-out;
5
}

这些属性也可以单写

属性名	说明	默认值	可选值
animation-timing-function	速度曲线	`ease`	`ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`, `cubic-bezier` 等
animation-delay	延迟时间	0s	可设为负值，负值表示跳过动画
animation-iteration-count	播放次数	1	`infinite` 表示无限播放
animation-direction	播放方向	`normal`	`normal`, `reverse`, `alternate`
animation-fill-mode	执行完毕状态	`none`	`none`, `forwards`, `backwards`, `both`
animation-play-state	播放状态	`running`	`running`, `paused`

逐帧动画#

速度曲线除了常见的 linear, ease, cubic-bezier等，还包含 steps() 函数， steps() 是 CSS 动画中用于控制动画分段执行的计时函数，它通过将动画分割为离散的步骤，实现类似传统帧动画（逐帧动画）的跳跃效果。示例代码：

1
.steps {
2
  /* 逐帧动画，参数为动画分段数 */
3
  animation: move 2s steps(5) infinite;
4
}