1.pl1 {
2  display: block;
3  width: 8em;
4  height: 8em;
5}
6
7.pl1__g,
8  .pl1__rect {
9  animation: pl1-a 1.5s cubic-bezier(0.65,0,0.35,1) infinite;
10}
11
12.pl1__g {
13  transform-origin: 64px 64px;
14}
15
16.pl1__rect:first-child {
17  animation-name: pl1-b;
18}
19
20.pl1__rect:nth-child(2) {
21  animation-name: pl1-c;
22}
23
24@keyframes pl1-a {
25  from {
26    transform: rotate(0);
27  }
28
29  80%,
30      to {
31    animation-timing-function: steps(1,start);
32    transform: rotate(90deg);
33  }
34}
35
36@keyframes pl1-b {
37  from {
38    animation-timing-function: cubic-bezier(0.33,0,0.67,0);
39    width: 40px;
40    height: 40px;
41  }
42
43  20% {
44    animation-timing-function: steps(1,start);
45    width: 40px;
46    height: 0;
47  }
48
49  60% {
50    animation-timing-function: cubic-bezier(0.65,0,0.35,1);
51    width: 0;
52    height: 40px;
53  }
54
55  80%,
56      to {
57    width: 40px;
58    height: 40px;
59  }
60}
61
62@keyframes pl1-c {
63  from {
64    animation-timing-function: cubic-bezier(0.33,0,0.67,0);
65    width: 40px;
66    height: 40px;
67    transform: translate(0,48px);
68  }
69
70  20% {
71    animation-timing-function: cubic-bezier(0.33,1,0.67,1);
72    width: 40px;
73    height: 88px;
74    transform: translate(0,0);
75  }
76
77  40% {
78    animation-timing-function: cubic-bezier(0.33,0,0.67,0);
79    width: 40px;
80    height: 40px;
81    transform: translate(0,0);
82  }
83
84  60% {
85    animation-timing-function: cubic-bezier(0.33,1,0.67,1);
86    width: 88px;
87    height: 40px;
88    transform: translate(0,0);
89  }
90
91  80%,
92      to {
93    width: 40px;
94    height: 40px;
95    transform: translate(48px,0);
96  }
97}