HTMLとCSSによるボタンアニメーション

取り急ぎHTMLとCSSの勉強をしようとおもいサンプルをいじって組み合わせたりしていじっています。
JSを利用せずにボタンが沈む動きをさせたいと思ったのですが、CSSの:activeがうまく挙動しません。原因を教えていただきたいです。

HTML
1<!DOCTYPE html>
2<html lang="en" >
3<head>
4  <meta charset="UTF-8">
5  <title>Waves</title>
6  <link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
7<link rel="stylesheet" href="./style.css">
8</head>
9<body>
10<!-- partial:index.partial.html -->
11
12
13<div id="keys">
14  <div id="a" class="keybox"></div>
15  <div id="b" class="keybox"></div>
16  <div id="c" class="keybox"></div>
17  <div id="d" class="keybox"></div>
18  <div id="e" class="keybox"></div>
19  <div id="f" class="keybox"></div>
20  <div id="g" class="keybox"></div>
21
22</di
23
24
25</body>
26</html>
27
28

CSS
1html, body {
2  height: 100%;
3}
4
5html {
6  background: #eee;
7}
8
9body {
10  display: flex;
11  justify-content: center;
12  align-items: center;
13}
14
15.box {
16  width: 1000px;
17  height: 700px;
18  border-radius: 5px;
19  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
20  background: #fbfcee;
21  position: relative;
22  overflow: hidden;
23  -webkit-transform: translate3d(0, 0, 0);
24          transform: translate3d(0, 0, 0);
25}
26
27
28.box:after {
29  content: '';
30  display: block;
31  left: 0;
32  top: 0;
33  width: 100%;
34  height: 100%;
35  background: linear-gradient(to bottom, #ee88aa, rgba(221, 238, 255, 0) 80%, rgba(255, 255, 255, 0.5));
36  z-index: 11;
37  -webkit-transform: translate3d(0, 0, 0);
38          transform: translate3d(0, 0, 0);
39}
40
41.title {
42  position: absolute;
43  left: 0;
44  top: 0;
45  width: 100%;
46  z-index: 1;
47  line-height: 300px;
48  text-align: center;
49  -webkit-transform: translate3d(0, 0, 0);
50          transform: translate3d(0, 0, 0);
51  color: white;
52  text-transform: uppercase;
53  font-family: 'Playfair Display', serif;
54  letter-spacing: .4em;
55  font-size: 24px;
56  text-shadow: 0 1px 0 rg0ba(0, 0, 0, 0.1);
57  text-indent: .3em;
58}
59
60
61
62
63#keys{
64    height: 116px;
65    width: 672px;
66    padding-right: 10px;
67    padding-top: 50px;
68    margin: auto;
69    position: absolute;
70    top: 0; left: 0; bottom: 0; right: 0;
71}
72
73.keybox {
74    width: 80px;
75    height: 80px;
76    margin-left: 10px;
77    float:left;
78  border-radius: 10px;
79  display: block;
80  -webkit-transition: all .15s ease-out;
81  transition: all .15s ease-out;
82}
83#a {
84    background-color: #E040FB;
85    box-shadow: 0px 6px 0px #AA00FF;
86}
87
88#b {
89    background-color: #7C4DFF;
90    box-shadow: 0px 6px 0px #6200EA;
91}
92
93#c {
94    background-color: #448AFF;
95    box-shadow: 0px 6px 0px #2962FF;
96}
97
98#d {
99    background-color: #9CCC65;
100    box-shadow: 0px 6px 0px #2E7D32;
101}
102
103#e {
104    background-color: #FFF176;
105    box-shadow: 0px 6px 0px #FFD600;
106}
107
108#f {
109    background-color: #FFB74D;
110    box-shadow: 0px 6px 0px #FF9100;
111}
112
113#g {
114    background-color: #FF7043;
115    box-shadow: 0px 6px 0px #F4511E;
116}
117
118.keybox.active {
119  box-shadow: none;
120  margin-top: 5px;active
121　transform: translateY(4px);
122  border-bottom: none;
123
124}
125
126#a.active {
127  background-color: #AA00FF;
128
129}
130
131#b.active {
132  background-color: #6200EA;
133}
134
135#c.active {
136  background-color: #2962FF;
137}
138
139#d.active {
140  background-color: #2E7D32;
141}
142
143#e.active {
144  background-color: #FFD600;
145}
146
147#f.active {
148  background-color: #FF9100;
149}
150
151#g.active {
152  background-color: #F4511E;
153}
154
155
156
157
158@-webkit-keyframes drift {
159  from {
160    -webkit-transform: rotate(0deg);
161            transform: rotate(0deg);
162  }
163  from {
164    -webkit-transform: rotate(360deg);
165            transform: rotate(360deg);
166  }
167}
168
169@keyframes drift {
170  from {
171    -webkit-transform: rotate(0deg);
172            transform: rotate(0deg);
173  }
174  from {
175    -webkit-transform: rotate(360deg);
176            transform: rotate(360deg);
177  }
178}
179