BXW

博哥的blog

博哥的技术博客

0%

css3过渡动画

发表于 更新于 分类于

css3过渡动画transition

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。用鼠标移过下面的元素：transition

它是如何工作？

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性
指定效果的持续时间。

实例

应用于宽度属性的过渡效果，时长为 2 秒：

1
2
3
4
5
6
7
8
9
10
11
//应用于宽度属性的过渡效果，时长为 2 秒：
div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
//规定当鼠标指针悬浮(:hover)于 <div>元素上时：
div:hover
{
    width:300px;
}

多项改变
要添加多个样式的变换效果，添加的属性由逗号分隔：

1
2
3
4
5
div
{
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
属性值
属性 描述 CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3

3D移动translate3d

3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向
transform: translateX(100px)：仅仅是在 x 轴上移动
transform: translateY(100px)：仅仅是在 y 轴上移动
transform: translateZ(100px)：仅仅是在 z 轴上移动
transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离
注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
//vue transform例子
//左下到右上
.rocket-fade-enter-active {
  transition: all 1.3s ease;
}
.rocket-fade-leave-active {
  transition: all 1.8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.rocket-fade-enter {
  transform: translate3d(-100%, 100%, 0) scale(0.1);
  opacity: 0;
}
.rocket-fade-leave-to {
  transform: translate3d(100%, -100%, 0) scale(0.1);
  opacity: 0;
}
//右上到左下
.rocket-fade-enter-active {
  transition: all 1.3s ease;
}
.rocket-fade-leave-active {
  transition: all 1.8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.rocket-fade-enter {
  transform: translate3d(100%, -100%, 0) scale(0.1);
  opacity: 0;
}
.rocket-fade-leave-to {
  transform: translate3d(-100%, 100%, 0) scale(0.1);
  opacity: 0;
}
//左上到右下
.rocket-fade-enter-active {
  transition: all 1.3s ease;
}
.rocket-fade-leave-active {
  transition: all 1.8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.rocket-fade-enter {
  transform: translate3d(-100%, -100%, 0) scale(0.1);
  opacity: 0;
}
.rocket-fade-leave-to {
  transform: translate3d(100%, 100%, 0) scale(0.1);
  opacity: 0;
}

//右下到左上
.rocket-fade-enter-active {
  transition: all 1.3s ease;
}
.rocket-fade-leave-active {
  transition: all 1.8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.rocket-fade-enter {
  transform: translate3d(100%, 100%, 0) scale(0.1);
  opacity: 0;
}
.rocket-fade-leave-to {
  transform: translate3d(-100%, -100%, 0) scale(0.1);
  opacity: 0;
}

//从中间放到缩小
.rocket-fade-enter-active {
  transition: all 1.3s ease;
}
.rocket-fade-leave-active {
  transition: all 1.8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.rocket-fade-enter {
  transform: scale(0.1);
  opacity: 0;
}
.rocket-fade-leave-to {
  transform: scale(0.1);
  opacity: 0;
}

3D 旋转rotateX 3D 旋转 rotateY

transform: rotateX(45deg) – 沿着 x 轴正方向旋转 45 度
transform: rotateY(45deg) – 沿着 y 轴正方向旋转 45 度
transform: rotateZ(45deg) – 沿着 z 轴正方向旋转 45 度
transform: rotate3d(x, y, z, 45deg) – 沿着自定义轴旋转 45 deg 为角度