持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情

写在前面：这篇文章是对前面css3动画animation的补充。前面我们介绍过animation是用来定义动画的，我们在实现动画效果的时候，还经常会用到一些其他的属性transform, transition。想要了解animation的可以看我的另外一篇文章css动画juejin.cn/post/713691…

transform

transform主要是用来设置倾斜，缩放，旋转，平移。具体属性值有下面几种

translate: 平移
scale: 缩放
rotate: 旋转
skew: 倾斜
matrix: 变换矩阵

1. 语法

transform: none <transform-list>
<transform-list> = <transform-function>+

也就是说transform的属性值可以是上面几种属性值的组合

2. translate

translate() 这个 CSS 函数用于移动元素在平面上的位置。这种变换的特点是矢量的坐标定义了它在每个方向上的移动量。

// 二维
translate(tx)
translate(tx, ty)
translateX(tx)
translateY(ty)
translateZ(tz)
// 三维
translate3d(tx, ty, tz)

2.1 参数说明

tx为，代表移动矢量的横坐标
ty为，代表移动矢量的纵坐标
ty为，代表移动矢量的z轴坐标，不能使用百分比
translateX(tx)是translate(tx, 0)和translate3d(tx, 0, 0)的缩写，translateY(ty)是translate(0, ty)和translate3d(0, ty, 0)的缩写，translateZ(tz)是translate3d(0, 0, tz)的缩写

3. scale

scale() CSS 函数可改变元素的大小。它可以增大或减小元素的大小，并且缩放量由矢量定义，并且它可以使在一个方向上比另一个方向更多。

// 二维
scale(sx)
scale(sx, sy)
scaleX(sx)
scaleY(sy)
scaleZ(sz)
// 三维
scale3d(sx, sy, sz)

3.1 参数说明：

sx为类型值，代表缩放矢量的横坐标
sy为类型值，代表缩放矢量的纵坐标。如果不存在，则其默认为sx，从而导致保持元素形状进行均匀缩放
sz为类型值，代表缩放矢量的z轴坐标
scaleX(sx)是scale(sx, 1)和scale3d(sx, 1, 1)的简写，scaleY(sy)是scale(1, sy)和scale3d(1, sy, 1)的简写，scaleZ(sz)是scale3d(1, 1, sz)的简写

4. rotate

rotate() CSS 函数定义一个旋转属性，将元素在不变形的情况下旋转到不动点周围 (如 transform-origin 属性所指定) 。移动量由指定角度定义;如果为正值，则运动将为顺时针，如果为负值，则为逆时针。180° 的旋转称为点反射 (point reflection)。

// 二维旋转
rotate(a)
rotateX(a)
rotateY(a)
rotateZ(a)
// 三维旋转
rotate3d(x, y, z, a)

4.1 参数说明

二维旋转中a表示代表旋转的角度。正角表示顺时针旋转，负角表示逆时针旋转
三维旋转中x表示描述轴向量的x坐标，y表示描述轴向量的y坐标，z表示描述轴向量的z坐标，a表示代表旋转的角度。
rotateX(a)相当于是rotate3d(1, 0, 0, a)的简写，rotateY(a)相当于是rotate3d(0, 1, 0, a)的简写，rotateZ(a)相当于是rotate3d(0, 0, 1, a)的简写

5. skew

skew() 这个 CSS 函数是一种用于拉伸，或者说是平移，该函数会使得在每个方向上扭曲元素上的每个点以一定角度。这是通过将每个坐标增加一个与指定角度成比例的值和到原点的距离来完成的。离原点越远，拉伸的值就越大。

skew(ax)
skew(ax, ay)
skewX(a)
skewY(a)

5.1 参数说明：

ax为，表示用于沿着横坐标扭曲元素的角度
ay为，表示用于沿着纵坐标扭曲元素的角度

6. matrix

// matrix3d() 用一个 4 × 4 的齐次矩阵来描述一个三维（3D）变换
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
// matrix()用六个指定的值来指定一个均匀的二维（2D）变换矩阵
matrix(a, b, c, d, tx, ty)

6.1 参数说明：

matrix3d()中a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4是用来描述线性变换, a4 b4 c4是用来描述变换的量
matrix()中a b c d是用来描述线性变换，tx ty是用来描述变换的量

transition

transition是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。 transition的语法如下：

transition = <single-transition>#
<single-transition> = [ none | <single-transition-property> ]  || <time> || <easing-function> || <time>
<single-transition-property> = all | <custom-ident>
<easing-function> = linear | <linear-easing-function> | <cubic-bezier-easing-function> | <step-easing-function> 
<linear-easing-function> = linear( <linear-stop-list> )  
<cubic-bezier-easing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> ) 
<step-easing-function> = step-start | step-end | steps( <integer> [, <step-position> ]? ) 
<linear-stop-list> = [ <linear-stop> ]# 
<step-position> = jump-start | jump-end | jump-none | jump-both |start | end
<linear-stop> = <number> && <linear-stop-length>?
<linear-stop-length> = <percentage>{1,2}

上面是详细语法，如果觉得看不懂，很费劲的话，我们只需要记住是transition-property，transition-duration，transition-timing-function 和 transition-delay这几个的组合

一个属性值
- transition-property transition-duration： transition: margin-right 4s;
- transition-property transition-duration transition-delay：transition: margin-right 4s 1s;
- transition-property transition-duration transition-timing-function：transition: margin-right 4s ease-in-out;
- transition-property transition-duration transition-timing-function transition-delay：transition: margin-right 4s ease-in-out 1s;
二个属性值
- transition: margin-right 4s, color 1s;

1. transition-property

过渡属性的名称，默认值为all

transition-property = none | <single-transition-property>#
<single-transition-property> = all | <custom-ident>

1.1 参数说明：

none: 没有过渡动画
all: 所有可被动画的属性都表现过渡动画
ident: 属性名称。由小写字母a到z, 数字0到9, 下划线(_)和破折号(-)。第一个破折号字符不能是数字。同时，不能以两个破折号开头

2. transition-duration

transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。可以设置多个时长，每个时长会被应用到对应的属性上。

transition-duration = <time [0s, ]>#

3. transition-timing-function

CSS 属性受到 transition effect的影响，会产生不断变化的中间值, transition-timing-function 属性用来描述这个中间值是怎样计算的。默认值是ease。可以设置多个值

transition-timing-function = ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end

4. transition-delay

transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。默认值为0s。也可以设置多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性

三者之前的区别

transform是用来设置静态属性的，transition和animation是用来设置动画属性的。
transition是animation的简易版，它们的具体区别如下： | transition | animation -- | -- | -- 触发条件 | 通常和hover等事件配合，由事件触发 | 和gif差不多，立即播放循环 | 不能循环 | 可设置循环次数精确性 | 只能设置头尾，所有样式属性都要一起变化 | 可以设置每一帧的时间和样式，每一帧变化的样式可以单独设置与JavaScript交互 | transition和js的结合更强大，Js设定要变化的样式，transition负责动画效果 | 与js交互不是很紧密

常见动画效果的应用

transform常用来实现3d效果。
transition常用来实现过渡效果，一般是用来实现元素进入或者离开的过渡效果
animation可以设置每一帧的形态，因此可以实现很复杂的动画效果。有关animation的用法，可以参考我的另外一篇文章：css3动画

淡入淡出

    <div class="float-container">
      <div class="fade_in">淡入</div>
      <div class="fade_out">淡出</div>
    </div>
    
    // css
    .float-container {
      width: 100%;
      div {
        width: 100px;
        background-color: aqua;
        height: 50px;
        margin: 10px;
        padding: 10px;
        color: #000;
      }
      .fade_in {
        opacity: 0;
        animation: fadeIn 3s 2s;
      }
      .fade_out {
        opacity: 1;
        animation: fadeOut 3s 2s;
      }
      @keyframes fadeIn {
        0% {
          opacity: 0;
        }
        50% {
          opacity: 0.5;
        }
        100% {
          opacity: 1;
        }
      }
      @keyframes fadeOut {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
        100% {
          opacity: 0;
        }
      }
    }

缩放

    <div class="float-container">
      <div class="zoom">缩放</div>
    </div>
    
    // css
    .float-container {
      width: 100%;
      div {
        width: 100px;
        background-color: aqua;
        height: 50px;
        margin: 10px;
        padding: 10px;
        color: #000;
      }
      .zoom {
        animation: zoom 2s 1s;
      }
      @keyframes zoom {
        100% {
          transform: scale(0);
          // 可以自定义缩放的基点
          transform-origin: center;
        }
      }
    }

展开折叠

    <div class="float-container">
      <div class="collapse-expand">展开</div>
      <div class="collapse-fold">折叠</div>
    </div>
    .float-container {
      width: 100%;
      div {
        width: 100px;
        background-color: aqua;
        height: 50px;
        margin: 10px;
        padding: 10px;
        color: #000;
      }
      .collapse-expand {
        height: 0;
        overflow: hidden;
        transition: height 1s 0.5s ease-in;
      }
      .collapse-expand:hover {
        height: 150px;
      }
      .collapse-fold {
        height: 150px;
        overflow: hidden;
        transition: height 1s 0.5s ease-in;
      }
      .collapse-fold:hover {
        height: 0px;
      }
    }

以上效果只是提供基础动画的实现，效果比较粗陋，不够精美，在实际项目开发中还需优化一下。

css动画中的常见属性--transform和transition