CSS动画

发表于 更新于 本文字数： 14k 阅读时长 ≈ 13 分钟

动画

CSS动画是W3C于2009年发布3D变形动画（标准草案），在年底发布了2D变形动画
浏览器支持使用代码形成网页动画，并且有些浏览器在添加时为了更好的兼容性，需要添加浏览器引擎的私有属性
1谷歌：-webkit-
2火狐：-moz-
3IE9：-ms-
4其它一些浏览器不需要添加这些私有属性

CSS 2D动画

●2D动画可以用于元素的旋转，缩放，位移等
●基本语法

transform:none|transform-function
none为默认值
transform-function：变形函数（变形函数可以是一个，也可以是多个函数列表） 函数是以()结尾

●常见的变形函数
○translate():移动元素
○scale():元素缩放，可以是任意尺寸发生变形
○rotate():旋转元素，取一个度数值，度数的后缀为deg，当度数为正时为顺时针旋转，为负时为逆时针旋转
○skew()：元素斜切，取度数值让元素发生形状变化
●旋转rotate()
○让元素逆时针或顺时针旋转

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
       .box{
           width: 200px;
           height: 200px;
           background-color: hotpink;
           border: 2px solid green;
           margin: 200px auto;
       }
       /*伪类样式：当鼠标悬停在元素上时触发里面的样式属性*/
       .box:hover{
           transform: rotate(90deg);
       }
   </style>

  • 位置移动translate(左值，上值)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
           .box{
               width: 200px;
               height: 200px;
               background-color: hotpink;
               border: 2px solid green;
           }
           .two{
               transform: translate(100px,100px);
           }
       </style>

  • 放大缩小（scale(宽度放大倍数,高度放大倍数) 当放大时两个值大于1，如果值位于0,1之间时为缩小）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: hotpink;
            border: 2px solid green;
            margin: 200px auto;
        }
        .box:hover{
            transform: scale(0.5,2);
        }
    </style>
</head>
<body>
    <div class="box">这是1</div>

</body>
  • 斜切（skew(Y轴角度，X轴角度)），当度数为正值时从左边斜切，为负值时从右边斜切
1
2
3
4
5
6
7
8
9
10
11
12
<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: hotpink;
            border: 2px solid green;
            margin: 200px auto;
        }
        .box:hover{
            transform: skew(45deg,10deg);
        }
    </style>

简易照片墙

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0 auto;
        }
        .PBox{
            width: 100%;
            height: 400px;
            background-color: #efefef;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-around;
        }
        .PBox dl{
            width: 10%;
            height: 70%;
            background-color: white;
            /*为了让照片看起来有那么点感觉，这里添加一个阴影*/
            box-shadow: 0px 10px 30px #8c8c8c;
            padding: 10px 20px;
            margin-top: 40px;
        }
        .PBox dt{
            width: 100%;
            height: 80%;
        }
        .PBox dt img{
            width: 100%;
            height: 100%;
        }
        .PBox dd{
            width: 100%;
            text-align: center;
            /*因为标签有一些默认的属性值，它在标签执行时就自动加载了，
            我们可以通过来提升自定义属性优先级来覆盖它*/
            margin: 8px 0px!important;
        }
        /*定义动画样式，让照片墙看起来不要那么规整*/
        .trans1{
            transform: skew(5deg,2deg);
        }
        .trans2{
            transform: scale(0.9,0.8);
        }
        .trans3{
            transform: rotate(25deg);
        }
        .trans4{
            transform: rotate(20deg) scale(1.1,1.1);
        }
        .trans5{
            transform: skew(5deg,2deg) scale(0.9,0.9);
        }
    </style>
</head>
<body>
    <!--网页版的照片墙，一共两行-->
    <div class="PBox">
        <!--单个照片-->
        <dl class="trans1">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl class="trans2">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl class="trans4">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl class="trans5">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl class="trans3">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl>
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
    </div>
    <div class="PBox">
        <!--单个照片-->
        <dl>
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl class="trans5">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl class="trans2">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl class="trans1">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl class="trans3">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
        <dl class="trans4">
            <dt>
                <img src="img/IMG_E1640.JPG" alt="">
            </dt>
            <dd>这是照片名称</dd>
        </dl>
    </div>
</body>
</html>

过渡

  • 过渡是元素从一种样式逐渐改变成另一种样式
  • 语法

transition:过渡属性名称 [时间][效果]

过渡属性 描述
transition 简写，该属性中包含了所有过渡属性
transition-property 规定应用过渡的CSS属性名称
transition-duration 过渡时间，默认为0
transition-delay 过渡从什么时候开始
……. …….. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
       .box{
           width: 200px;
           height: 200px;
           background-color: hotpink;
           border: 2px solid green;
           margin: 200px auto;
       }
       .box:hover{
           /*transform: skew(45deg,10deg);*/
           transform: scale(2,2);
           transition: transform 1s;
       }
   </style>

通过过渡完善照片墙（当鼠标长按图片时，照片显示在网页的中间，并且照片角度回正，放大两倍） 长按（:active）

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
//长按案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: hotpink;
            border: 2px solid green;
            margin: 200px auto;
        }
        .box:active{
            /*transform: skew(45deg,10deg);*/
            transform: scale(2,2);
            transition: transform 1s;
        }
    </style>
</head>
<body>
    <div class="box">这是1</div>

</body>
</html>

自定义动画

  • 使用Animation功能可以实现更加复杂的动画
属性 说明 初始值
animation 包含所有属性
animation-name 动画名称 none
animation-duration 动画时间 0
animation-timing-function 动画播放方式 ease
animation-iteration-count 动画播放的次数 1，infinite为重复播放

  • 制作动画需要以下两步

    • 第一步：需要在样式表中添加动画过程属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@-webkit-keyframes name {
    /*动画开始时属性样式*/
    0%{
    /*样式属性：属性值*/
    }
    /*动画结束时属性样式*/
    100%{
    /*样式属性：属性值*/
    }
  }

  @keyframes name {
    /*动画开始时属性样式*/
    0%{
    /*样式属性：属性值*/
    }
    /*动画结束时属性样式*/
    100%{
    /*样式属性：属性值*/
    }
	}
    • 第二步：将制作好的动画通过animation引入给标签使用
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
//图片翻转
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0px;
        }
        .box{
            width: 500px;
            height: 300px;
            background-image: url("img/IMG_E1640.JPG");
            background-size: 100%;
            /*引用动画*/
            animation:rotateImg 10s infinite;
        }

        /*制作动画执行过程*/
        @-webkit-keyframes rotateImg {
            0%{
                /*图片起始不动*/
                -webkit-transform: rotateY(0deg);
            }
            50%{
                -webkit-transform: rotateY(360deg);
            }
            100%{
                -webkit-transform: rotateY(720deg);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

光盘旋转效果

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0px;
        }
        .box{
            width: 500px;
            height: 500px;
            background-image: url("img/IMG_E1640.JPG");
            background-size: 100% 100%;
            border-radius: 50%;
            display: flex;
            /*引用大圆旋转动画*/
            animation: box 30s linear infinite;
        }
        .lb{
            width: 400px;
            height: 400px;
            background-image: url("img/IMG_1443.JPG");
            background-size: 100% 100%;
            border-radius: 50%;
            align-self: center;
            animation: lb 15s linear infinite;
        }
        /*制作动画：大圆要顺时针旋转，稍慢*/
        @-webkit-keyframes box {
            0%{
                -webkit-transform: rotate(0deg);
            }
            100%{
                -webkit-transform: rotate(360deg);
            }
        }
        /*制作动画：小圆要逆时针旋转，稍快*/
        @-webkit-keyframes lb {
            0%{
                -webkit-transform: rotate(0deg);
            }
            100%{
                -webkit-transform: rotate(-360deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="lb"></div>
    </div>
</body>
</html>

3D旋转相册

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
	background:#06081B;
	perspective:5000px;
}
.show {
	perspective:5000px;
	-webkit-transform:rotateX(-45deg);
	-moz-transform:rotateX(-45deg);
	transform:rotateX(-45deg);
	transform-style:preserve-3d;

}
.box {
	position:relative;
	width:150px;
	height:250px;

	margin:300px auto;
	transform-style:preserve-3d;
	-webkit-animation:rotate1 10s linear infinite;
	-moz-animation:rotate1 10s linear infinite;
	animation:rotate1 10s linear infinite;
    background-image: url("img/IMG_E1640.JPG");
    background-size: 100%;
}
.box img {
	width:150px;
	height:250px;
	border:1px solid #ccc;
	position:absolute;
	left:0;
	top:0;
	-webkit-box-reflect:below 20px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,0) 30%,rgba(250,250,250,0.5));
}
.img1 {
	-webkit-transform:translateZ(300px);
	-moz-transform:translateZ(300px);
	transform:translateZ(300px);
}
.img2 {
	-webkit-transform:rotateY(36deg) translateZ(300px);
	-moz-transform:rotateY(36deg) translateZ(300px);
	transform:rotateY(36deg) translateZ(300px);
}
.img3 {
	-webkit-transform:rotateY(72deg) translateZ(300px);
	-moz-transform:rotateY(72deg) translateZ(300px);
}
.img4 {
	-webkit-transform:rotateY(108deg) translateZ(300px);
	-moz-transform:rotateY(108deg) translateZ(300px);
	transform:rotateY(108deg) translateZ(300px);
}
.img5 {
	-webkit-transform:rotateY(144deg) translateZ(300px);
	-moz-transform:rotateY(144deg) translateZ(300px);
	transform:rotateY(144deg) translateZ(300px);
}
.img6 {
	-webkit-transform:rotateY(180deg) translateZ(300px);
	-moz-transform:rotateY(180deg) translateZ(300px);
	transform:rotateY(180deg) translateZ(300px);
}
.img7 {
	-webkit-transform:rotateY(216deg) translateZ(300px);
	-moz-transform:rotateY(216deg) translateZ(300px);
	transform:rotateY(216deg) translateZ(300px);
}
.img8 {
	-webkit-transform:rotateY(252deg) translateZ(300px);
	-moz-transform:rotateY(252deg) translateZ(300px);
	transform:rotateY(252deg) translateZ(300px);
}
.img9 {
	-webkit-transform:rotateY(288deg) translateZ(300px);
	-moz-transform:rotateY(288deg) translateZ(300px);
	transform:rotateY(288deg) translateZ(300px);
}
.img10 {
	-webkit-transform:rotateY(324deg) translateZ(300px);
	-moz-transform:rotateY(324deg) translateZ(300px);
	transform:rotateY(324deg) translateZ(300px);
}
@-moz-keyframes rotate1 {
	0% {
	-webkit-transform:rotateY(0deg);
	-moz-transform:rotateY(0deg);
	transform:rotateY(0deg);
}
100% {
	-webkit-transform:rotateY(360deg);
	-moz-transform:rotateY(360deg);
	transform:rotateY(360deg);
}
}@-webkit-keyframes rotate1 {
	0% {
	-webkit-transform:rotateY(0deg);
	-moz-transform:rotateY(0deg);
	transform:rotateY(0deg);
}
100% {
	-webkit-transform:rotateY(360deg);
	-moz-transform:rotateY(360deg);
	transform:rotateY(360deg);
}
}</style>
</head>
<body>
<div class="show">
    <div class="box">
        <img src="img/IMG_E1642.JPG" class="img1">
        <img src="img/IMG_E1644.JPG" class="img2">
        <img src="img/IMG_E1640.JPG" class="img3">
        <img src="img/IMG_1444.JPG" class="img4">
        <img src="img/IMG_1440.JPG" class="img5">
        <img src="img/IMG_1439.JPG" class="img6">
        <img src="img/IMG_1430.JPG" class="img7">
        <img src="img/IMG_1427.JPG" class="img8">
        <img src="img/IMG_1429.JPG" class="img9">
        <img src="img/IMG_1443.JPG" class="img10">
    </div>
</div>


</body>
</html>

  • 定位(position)

    • 属性
      • absolute：绝对定位 会让元素脱离文档流，会参照第一个父元素进行定位
      • fiexd：规定位置，将元素固定在某个位置不动，不管网页怎么拖动，该元素始终不动
      • relative：相对定位，相对于正常位置进行定位
      • inherit：继承，规定添加了该属性的元素继承它父元素的定位属性
    • 注：添加了定位后，对于标签位置移动时不使用margin，而使用left,right,top,bottom
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            margin: 100px;
            position: relative;
        }
        .rows{
            width: 400px;
            height: 200px;
        }
        .cols{
            width: 50%;
            height: 100%;
            float: left;
        }
        .c1{
            background-color: #ee3fb3;
        }
        .c2{
            background-color: #50eecd;
        }
        .lb{
            width: 200px;
            height: 200px;
            background-color: #17ff0a;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="rows">
            <div class="cols c1"></div>
            <div class="cols c2"></div>
        </div>
        <div class="rows">
            <div class="cols c2"></div>
            <div class="cols c1"></div>
        </div>
        <div class="lb"></div>
    </div>
</body>
</html>
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .b1{
            height: 1000px;
            background-color: #50eecd;
        }
        .b2{
            height: 1000px;
            background-color: #41ee4e;
        }
        .b3{
            height: 1000px;
            background-color: #edee4f;
        }
        .b4{
            height: 1000px;
            background-color: #ee3b13;
        }
        .b5{
            height: 1000px;
            background-color: #c25eee;
        }
        .fixedDemo{
            position: fixed;
            right: 0px;
            top: 30%;
            background-color: #17ff0a;
        }
    </style>
</head>
<body>
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b3"></div>
    <div class="b4"></div>
    <div class="b5"></div>
    <div class="fixedDemo">若干国粹</div>
</body>
</html>