blob: 008b8466e3990744aaad6e4fa2d6a50652cbf687 [file] [log] [blame]
Tyler Scottcdfcde82015-09-14 16:13:29 -06001.sk-cube-grid {
2 width: 40px;
3 height: 40px;
4 margin: 100px auto;
5}
6
7.sk-cube-grid .sk-cube {
8 width: 33%;
9 height: 33%;
10 background-color: #333;
11 float: left;
12 -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
13 animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
14}
15.sk-cube-grid .sk-cube1 {
16 -webkit-animation-delay: 0.2s;
17 animation-delay: 0.2s; }
18.sk-cube-grid .sk-cube2 {
19 -webkit-animation-delay: 0.3s;
20 animation-delay: 0.3s; }
21.sk-cube-grid .sk-cube3 {
22 -webkit-animation-delay: 0.4s;
23 animation-delay: 0.4s; }
24.sk-cube-grid .sk-cube4 {
25 -webkit-animation-delay: 0.1s;
26 animation-delay: 0.1s; }
27.sk-cube-grid .sk-cube5 {
28 -webkit-animation-delay: 0.2s;
29 animation-delay: 0.2s; }
30.sk-cube-grid .sk-cube6 {
31 -webkit-animation-delay: 0.3s;
32 animation-delay: 0.3s; }
33.sk-cube-grid .sk-cube7 {
34 -webkit-animation-delay: 0s;
35 animation-delay: 0s; }
36.sk-cube-grid .sk-cube8 {
37 -webkit-animation-delay: 0.1s;
38 animation-delay: 0.1s; }
39.sk-cube-grid .sk-cube9 {
40 -webkit-animation-delay: 0.2s;
41 animation-delay: 0.2s; }
42
43@-webkit-keyframes sk-cubeGridScaleDelay {
44 0%, 70%, 100% {
45 -webkit-transform: scale3D(1, 1, 1);
46 transform: scale3D(1, 1, 1);
47 } 35% {
48 -webkit-transform: scale3D(0, 0, 1);
49 transform: scale3D(0, 0, 1);
50 }
51}
52
53@keyframes sk-cubeGridScaleDelay {
54 0%, 70%, 100% {
55 -webkit-transform: scale3D(1, 1, 1);
56 transform: scale3D(1, 1, 1);
57 } 35% {
58 -webkit-transform: scale3D(0, 0, 1);
59 transform: scale3D(0, 0, 1);
60 }
61}