HTMLでのclassの指定について

CSS
1body {
2  background: #102f44;
3  font-family: Arial, sans-serif;
4  font-size: 16px;
5}
6
7.box + .box {
8  margin-left: 40px;
9}
10
11.container {
12  /*85 * 3 + 80*/
13  width: 335px;
14  margin: 30px auto;
15}
16
17.boxes {
18  font-size: 0;
19  margin-bottom: 40px;
20}
21
22.box {
23  cursor: pointer;
24}
25
26.shake:hover {
27  animation-name: shake;
28  animation-duration: .2s;
29  animation-timing-function: linear;
30  animation-iteration-count: infinite;
31}
32
33@keyframes shake {
34  0% { transform: rotate(8deg) translate(1px, 0); }
35  50% { transform: rotate(-8deg) translate(-1px, 0); }
36  100% { transform: rotate(8deg) translate(1px, 0); }
37}
38

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Treasure Hunter</title>
6  <link rel="stylesheet" href="css/styles.css">
7</head>
8<body>
9  <div class="container">
10    <div class="boxes">
11      <img src="img/box.png" width="85" height="100" class="box shake">
12      <img src="img/box.png" width="85" height="100" class="box shake">
13      <img src="img/box.png" width="85" height="100" class="box shake">
14    </div>
15  </div>
16</body>
17</html>