几个涉及变化的CSS属性知多少

发表于 分类于 阅读次数： 本文字数： 1.1k 阅读时长 ≈ 4 分钟

本文主要对 CSS 中的 transform、translate、transition 和 animation 这些容易混淆的属性进行梳理归纳，希望帮你一文搞定这些属性。

Transform

CSS 中 transform 属性允许元素进行旋转 rotate() ，缩放 scale() ，倾斜 skew() ，平移 translate() 或矩阵 matrix() 等操作，通过修改 CSS 视觉格式化模型的坐标空间实现。

语法：transform: none | <transform-function>

复合变化应用顺序：从右到左。

transform-origin 属性允许设置 transform 变化的原点。可以有 1-3 个值分别代表 X，Y，Z 轴的偏移量，其中 X，Y 轴可以为具体长度，百分比或者是关键字，Z 轴只能是具体长度。如果没值则默认为 center 。

关键字有: left，top，center，right，bottom。

transform 常见用法：

  1. 居中操作
1
2
3
4
5
6
.transform-panel {
  position: absolute;
  right: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  1. 元素 hover 时的特殊处理
1
2
3
4
5
6
7
8
.transform-panel:hover {
  // 放大
  transform: scale(2, 2);
  // 旋转45度
  transform: rotate(45deg);
  // 向x、y轴偏移
  transform: translate(12px, 50%);
}
  1. 动态改变元素属性实现动画

主要通过逻辑改变元素的 transform 的值来实现，具体常用场景如：

  • 弹幕滑动
  • 小球滚动
  • 轮播展示

Translate

CSS 中的 translate 属性允许单独声明元素的平移，并独立于 transform 属性。用户不需要通过 transform 属性去声明 translate 函数，也不需要记住其顺序，在很多涉及平移的场景使用更加友好。

translate 的值可以为 1-3 个平移量值或者是 none 值，并且当值为 1 个或 2 个时等同于 2D 平移函数 translate() ，当值有 3 个时等同于 3D 平移函数 translate3d() 。

Transition

CSS 中的 transition 属性定义了元素不同状态的过渡效果，是 transition-property、transition-duration、transition-timing-function 和 transition-delay 属性的集合。可以指定多个属性需用逗号分隔。

语法：transition： property name | duration | timing function | delay

transition-property 属性：指定应用过渡属性的名称。

  • none： 没有过渡动画
  • all：所有表现此过渡动画
  • <特定属性>

transition-timing-function 属性：描述了在过渡过程中的变化速度。可选值有 linear | ease | ease-in-out 等。查看更多

transition 常见用法：

  1. 为元素的:hovor，:active 添加动画
  2. 结合 translate 更加柔和展示轮播效果

Animation

CSS 中的 animation 属性用来指定一组或多组动画，是 animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 的集合。

语法：animation：@keyframes name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state

属性 意义
animation-name 指定动画名，由@keyframes 定义的动画序列
animation-duration 一个动画周期的时长
animation-timing-function 定义于一个关键帧区块的缓动函数
animation-delay 动画响应延时
animation-iteration-count 循环次数，可以为数字或者 infinite
animation-direction 播放方向，可选值：normal，reverse，alternate，alternate-reverse
animation-fill-mode 动画在执行之前和之后如何将样式应用于其目标，可选值：none，forwards，backwards，both
animation-play-state 动画是否运行或者暂停，可选值：paused，running

在 animation 的属性使用过程中需要先创建带名称的 @keyframes 关键帧规则，然后设置 animation-name 与之相匹配。 @keyframes 关键帧能控制 CSS 动画序列中的中间步骤。中间步骤取值：from(0%)，百分比，to(100%)。要注意的是 !important 属性将被忽略。

一个简单的背景颜色变化 🌰：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.transform-panel {
  width: 100px;
  height: 100px;
  background: red;
  animation: animationDemo 5s;
}

@keyframes animationDemo {
  from {
    background-color: red;
  }

  10% {
    background-color: blue;
  }

  60% {
    background-color: green;
  }

  to {
    background-color: yellow;
  }
}

animation 常用使用场景：

  1. 自动执行的过渡动画
  2. 利用 js 触发动画执行、改变动画效果、改变次数等

总结

  • 为了更好理解，我对几个名词有个定义：transform 是变换、translate 是平移、transition 是变换的效果、animation 是动画。
  • transform 并不是一种动画，要实现动画需要配合 transition 和 animation。
  • translate 是 translate() 函数独立出来的 CSS 属性
  • transition 的动画只有开始和结束状态，没有中间态，animation 可以定义动画中间态。
  • transition 的动画需要触发事件去执行的，animation 动画不需要触发可以自定义甚至无限执行。
  • 结合 js 动态改变属性可以丰富效果。