简介

cubic-bezier 又称三次贝塞尔，主要是为 animation 生成速度曲线的函数, CSS3 动画速度的控制通过三次贝塞尔曲线函数实现，定义规则为： cubic-bezier (x1, y1, x2, y2)。

cubic-bezier：http://cubic-bezier.com/

css3中常用的几个动画效果：

1
2
3
4
5
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)   // 开始和结束慢，中间快
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)   // 匀速
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)   // 开始慢
ease-out: cubic-bezier(0, 0, 0.58, 1.0)   // 结速慢
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)  // 与ease类似，但比ease幅度大

基本原理

贝塞尔曲线通过控制曲线上的四个点（起始点、终止点以及两个相互分离的中间点）来创造、编辑图形，绘制出一条光滑曲线并以曲线的状态来反映动画过程中速度的变化。

alt text
image

从上图我们知道的是 cubic-bezier 的取值范围:

  • A：默认值 (0, 0)
  • B：动态取值 (x1, y1)
  • C：动态取值 (x2, y2)
  • D：默认值 (1, 1)

其中 X 轴的取值范围是 [0, 1]，当取值超出范围时 cubic-bezier 将失效；Y 轴的取值没有规定，当然也毋须超过 [0, 1] 过大。

我们需要关注的是 B 和 C 两点的取值，这两点就是所要动态操控的两个点了,对应cubic-bezier (x1,y1,x2,y2)中的四个参数。

实例演示

下面用一个简单的实例来看看效果：demo演示

html 部分

1
2
<div class="normal"></div>
<div class="custom"></div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.normal {
  margin-bottom: 10px;
  width: 50px;
  height: 50px;
  background-color: #ff0000;
  border-radius: 50%;
  -webkit-transition:  all 2s;
     -moz-transition:  all 2s;
       -o-transition:  all 2s;
          transition:  all 2s;
}
.normal:hover {
  -webkit-transform:  translateX(150px);
     -moz-transform:  translateX(150px);
       -o-transform:  translateX(150px);
          transform:  translateX(150px);
}
.custom {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: blue;
  -webkit-transition:  all 2s cubic-bezier(.94,-0.25,.32,1.31);
     -moz-transition:  all 2s cubic-bezier(.94,-0.25,.32,1.31);
       -o-transition:  all 2s cubic-bezier(.94,-0.25,.32,1.31);
          transition:  all 2s cubic-bezier(.94,-0.25,.32,1.31);
}
.custom:hover {
  -webkit-transform:  translateX(300px);
     -moz-transform:  translateX(300px);
       -o-transform:  translateX(300px);
          transform:  translateX(300px);
}

红色小球采用默认的速度曲线是 ease，蓝色小球采用自定义cubic-bezier(.94,-0.25,.32,1.31),呈现蓄力加速效果。

transition（过渡）

transition属性

  • transition-property: 过渡属性(默认值为all)

  • transition-duration: 过渡持续时间(默认值为0s)

  • transiton-timing-function: 过渡函数(默认值为ease函数)

  • transition-delay: 过渡延迟时间(默认值为0s)

语法

1
transition: property duration timing-function delay;

animation（动画）

animation属性结合@ keyframes使用，animation中的animation-name需要设置成@ keyframes的name一致。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
.box {
    height: 100px;
    width: 100px;
    border: 15px solid black;
    animation: changebox 10s ease-in-out 3 alternate paused;
}
.box:hover {
    animation-play-state: running;
}
@keyframes changebox {
    10% {
        background: red;
    }
    50% {
        width: 80px;
    }
    70% {
        border: 15px solid yellow;
    }
    100% {
        width: 180px;
        height: 180px;
    }
}
</style>
<body>
    <div class="box"></div>
</body>

animation属性

  • animation-name: 指定要绑定到选择器的关键帧的名称

  • animation-duration: 动画指定需要多少秒或毫秒完成

  • animation-timing-function: 设置动画将如何完成一个周期

  • animation-delay: 设置动画在启动前的延迟间隔

  • animation-iteration-count: 定义动画的播放次数

  • animation-direction: 指定是否应该轮流反向播放动画

  • animation-fill-mode:规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式

  • animation-play-state: 指定动画是否正在运行或已暂停。
    语法

    1
    animation: name duration timing-function delay iteration-count direction fill-mode play-state;

transform（变形）

transform 分为2D 和 3D，其主要包含以下几种变换：translate位移，scale缩放，rotate旋转，skew扭曲等。

2D变形：

translate位移

1
2
3
transform: translate(50px, 100px);
transform: translateX(50px);  // x方向移动50px
transform: translateY(100px);

scale缩放

1
2
3
transform: scale(2, .5);
transform: scaleX(2);   // x方向增加一倍
transform: scaleY(.5);  // y方向缩小一倍

rotate旋转：rotate（正数表示顺时针旋转，负数表示逆时针旋转）

1
transform: rotate(30deg);

skew扭曲

1
2
3
transform: skew(30deg, 30deg);
transform: skewX(30deg);
transform: skewY(30deg);

3D变形：

translate位移： translate(x, y, z);

scale缩放： scale(x, y, z);

rotate旋转：rotate3d(x, y, z, angle) (angle:表示3D舞台上旋转的角度)