CSS3 动画专题(下)

发表于 更新于 分类于 本文字数： 2k 阅读时长 ≈ 7 分钟
这是 CSS3 动画专题的学习笔记。下半部分。主要内容包括：transform3D、过渡属性、动画。

如果看不见内嵌网页或者连接错误，请刷新。

transform3D

参考 translate3d()

常用函数

函数描述
translate3d(x, y, z)定义 3D 转换，元素从当前位置移动到 (x,y,z)。
translateX(x)定义 3D 转换，元素从当前位置水平移动到 x。
translateY(y)定义 3D 转换，元素从当前位置垂直移动到 y。
translateZ(z)定义 3D 转换，元素从当前位置移动到 z。
rotate3d(x, y, z, angle)定义 3D 转换，元素围绕 (x,y,z) 轴移动到 angle。
rotateX(angle)定义 3D 转换，元素围绕 x 轴移动到 angle。
rotateY(angle)定义 3D 转换，元素围绕 y 轴移动到 angle。
rotateZ(angle)定义 3D 转换，元素围绕 z 轴移动到 angle。
scale3d(x, y, z)定义 3D 缩放转换，元素从当前尺寸缩放到 (x,y,z)。
scaleX(x)定义 3D 缩放转换，元素从当前尺寸水平缩放到 x。
scaleY(y)定义 3D 缩放转换，元素从当前尺寸垂直缩放到 y。
scaleZ(z)定义 3D 缩放转换，元素从当前尺寸缩放到 z。
perspective(n)为 3D 转换元素定义透视视图。

从上表可以看出，3D 转换的函数和 2D 转换的函数是一样的，只是多了一个 z 轴的参数。
transform3D 主要是 3 个参数：translate3d、rotate3d、scale3d。

e.g. 1

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transform3D</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px;
        }
        .translate{
            transform: translate3d(100px, 100px, 100px);
        }
        .rotate{
            transform: rotate3d(1, 1, 1, 45deg);
        }
        .scale{
            transform: scale3d(2, 2, 2);
        }
    </style>
</head>

<body>
    <div class="translate"></div>
    <div class="rotate"></div>
    <div class="scale"></div>
</body>
</html>

e.g. 2

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transform3D</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            border: brown solid 1px;
            border-radius: 3px;
            text-align: center;
            margin: 100px auto;
            /*在这里添加一个过渡效果*/
            transition: all 1s;


            &:hover {
                box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
                /* 放大 1.5 倍 */
                /*transform: scale3d(1.5, 1.5, 1.5);*/
                transform: perspective(100px) scale3d(1.5, 1.5, 1.5);

            }
        }

        #box2 {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            text-align: center;
            /*在这里添加一个过渡效果*/
            transition: all 1s;

            &:hover {
                /*内容旋转 1 周*/
                /*transform: rotate3d(1, 1, 1, 360deg);*/
                transform: perspective(100px) rotate3d(1, 1, 1, 360deg);
            }
        }
    </style>
</head>
<body>
<div id="box1">
    <div id="box2">Soyo sann ❤️ Love!
    </div>
</div>
</body>
</html>

warn:如果看不见内嵌网页或者连接错误，请刷新。

通过上面这个例子，可以看出，3D 转换的函数和 2D 转换的函数是一样的，只是多了一个 z 轴的参数。

过渡属性

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

  1. 指定四个要素

    1. 过渡属性，如 background、width、height、color 等等
    2. 过渡时间，如 1s、2s 等等
    3. 过渡函数，如 linear、ease、ease-in、ease-out、ease-in-out 等等
    4. 延迟时间，如 1s、2s 等等

  2. 触发过渡通过用户的行为触发过渡，如 :hover、:active、:focus 等等

transition-property

transition-property 属性用于设置过渡效果的 CSS 属性的名称。

语法：

1
transition-property: none|all|property;

  • none：默认值，没有属性会获得过渡效果

  • all：所有属性都将获得过渡效果

  • property：定义应用过渡效果的 CSS 属性的名称列表

transition-duration

transition-duration 属性用于设置过渡效果的持续时间。

语法：

1
transition-duration: time;

  • time：必需，规定完成过渡效果需要花费的时间，以秒或毫秒计

transition-timing-function

transition-timing-function 属性用于设置过渡效果的速度曲线。

语法：

1
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)|step-start|step-end|steps(int,start|end)|initial|inherit;

  • linear：默认值，规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）

  • ease：规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）

  • ease-in：规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）

  • ease-out：规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）

  • ease-in-out：规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）

  • cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

  • step-start：规定在开始时立即过渡到目标值，没有过渡效果（等于 steps(1,start)）

  • step-end：规定在结束时立即过渡到目标值，没有过渡效果（等于 steps(1,end)）

  • steps(int,start|end)：规定在指定的百分比处发生指定的过渡效果。可能的值是 0 至 1 之间的数值，以及 start 和 end

  • initial：设置该属性为它的默认值

  • inherit：从父元素继承该属性

transition-delay

transition-delay 属性用于设置过渡效果的延迟时间。

语法：

1
transition-delay: time;

  • time：必需，规定过渡效果何时开始，以秒或毫秒计

e.g.

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transition</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            /*transition: all 1s;*/
            /*过渡属性*/
            transition-property: width, height, background-color, font-size, color;
            /*过渡时间*/
            transition-duration: 1s;
            /*过渡函数*/
            transition-timing-function: ease-in-out;
            /*过渡延迟*/
            transition-delay: 1s;

            &:hover {
                font-size: 30px;
                width: 200px;
                height: 200px;
                background-color: royalblue;
                color: white;
            }
        }
    </style>
</head>
<body>
<div id="box1">
    <div>Soyo sann ❤️ Love!</div>
</div>
</body>
</html>

warn:如果看不见内嵌网页或者连接错误，请刷新。

我们还可以使用 transition 属性来简写上面的代码。

比如transition: width 1s ease-in-out 1s, height 1s ease-in-out 1s, background-color 1s ease-in-out 1s, font-size 1s ease-in-out 1s, color 1s ease-in-out 1s;。

如果不需要精准控制，可以使用 all 来简写，比如 transition: all 1s ease-in-out 1s;。

动画 Animation

过渡属性只能实现简单的动画效果，如果需要实现复杂的动画效果，就需要使用动画属性了。

animation 属性用于设置动画效果。通过关键帧控制动画的每一步，通过动画属性控制动画的播放方式。

@keyframes

@keyframes 规则用于创建动画。

语法：

1
2
3
4
5
@keyframes animationname {
    keyframes-selector {
        css-styles;
    }
}

e.g.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@keyframes name {
    from|0% {
        css-styles;
    }
    25% {
        css-styles;
    }
    50% {
        css-styles;
    }
    75% {
        css-styles;
    }
    to|100% {
        css-styles;
    }
}

animation 属性

animation 属性用于设置动画效果。

调用 @keyframes 规则中定义的动画。设置动画的持续时间、速度曲线、延迟等等。

语法：

1
animation: name duration timing-function delay iteration-count direction;

  • name：必需，规定需要绑定到选择器的 keyframe 名称

  • duration：必需，规定完成动画所花费的时间，以秒或毫秒计

  • timing-function：可选，规定动画的速度曲线，默认是 ease

  • delay：可选，规定在动画开始之前的延迟，默认是 0

  • iteration-count：可选，规定动画应该播放的次数，默认是 1

  • direction：可选，规定是否应该轮流反向播放动画，默认是 normal

e.g. banner 轮播图

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Banner</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        #banner{
            width: 100%;
            height: 100vh;
            background-color: #000;
            overflow: hidden;
            /*display: flex;*/
            /*justify-content: center;*/
            /*align-items: center;*/
        }
        #box{
            position: relative;
            animation: move 12s linear infinite;
        }
        #box img{
            /*position: absolute;*/
            opacity: 0;
            animation: move 12s linear infinite;
        }
        #box img:nth-child(1){
            animation-delay: 0s;
        }
        #box img:nth-child(2){
            animation-delay: 2s;
        }
        #box img:nth-child(3){
            animation-delay: 4s;
        }
        #box img:nth-child(4){
            animation-delay: 6s;
        }
        #box img:nth-child(5){
            animation-delay: 8s;
        }
        @keyframes move {
            0%{
                opacity: 0;
            }
            20%{
                opacity: 1;
            }
            80%{
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div id="banner">
        <div id="box">
            <img src="https://anime.bang-dream.com/mygo/wordpress/wp-content/themes/mygo_v1/assets/images/common/character/img_tomori.png" alt="tomori" id="1">
            <img src="https://anime.bang-dream.com/mygo/wordpress/wp-content/themes/mygo_v1/assets/images/common/character/img_anon.png" alt="anon" id="2">
            <img src="https://anime.bang-dream.com/mygo/wordpress/wp-content/themes/mygo_v1/assets/images/common/character/img_rana.png" alt="rana" id="3">
            <img src="https://anime.bang-dream.com/mygo/wordpress/wp-content/themes/mygo_v1/assets/images/common/character/img_soyo.png" alt="soyo" id="4">
            <img src="https://anime.bang-dream.com/mygo/wordpress/wp-content/themes/mygo_v1/assets/images/common/character/img_taki.png" alt="taki" id="5">
        </div>
    </div>
</body>
</html>

点击查看效果

warn:如果看不见内嵌网页或者连接错误，请刷新。