Анимация ШИМ сигнала

Сделал анимацию, есть ли способ по лучше?

https://codepen.io/DivMan/pen/pomMLbv

HTML:

1. <div class="block">
2.     <div class="line"></div>
3.     <div class="line2"></div>
4.     <div class="line3"></div>
5.     <div class="line4"></div>
6.     <div class="line5"></div>
7. </div>
8.  
9.  
10. <div class="block block2">
11.     <div class="line"></div>
12.     <div class="line2"></div>
13.     <div class="line3"></div>
14.     <div class="line4"></div>
15.     <div class="line5"></div>
16. </div>
17.  
18. <div class="block block3">
19.     <div class="line"></div>
20.     <div class="line2"></div>
21.     <div class="line3"></div>
22.     <div class="line4"></div>
23.     <div class="line5"></div>
24. </div>
25.  
26. <div class="block block4">
27.     <div class="line"></div>
28.     <div class="line2"></div>
29.     <div class="line3"></div>
30.     <div class="line4"></div>
31.     <div class="line5"></div>
32. </div>
33.  
34. <div class="block block5">
35.     <div class="line"></div>
36.     <div class="line2"></div>
37.     <div class="line3"></div>
38.     <div class="line4"></div>
39.     <div class="line5"></div>
40. </div>

Код (CSS):

1. .block, block2, block3, block4, block5  {
2.     position: relative;
3.     top: 10;
4.     left: 10px;
5. }
6.  
7. .block2 {left: 130px;}
8. .block3 {left: 250px;}
9. .block4 {left: 370px;}
10. .block5 {left: 490px;}
11.  
12. .line {
13.     position: absolute;
14.     top: 20px;
15.     bottom: 0;
16.     border-top: 2px solid green;
17.     left: 20px;
18.     width: 20px;
19.     transform-origin: left;
20.     animation: center-animate 2s ease infinite alternate;  
21. }
22.    
23. .line2 {
24.     position: absolute;
25.     top: 20px;
26.     bottom: 0;
27.     border-left: 2px solid green;
28.     left: 40px;
29.     height:80px;  
30.     transform-origin: left;
31.     animation: center-animate2 2s ease infinite alternate;  
32. }
33.    
34. .line3{
35.     position: absolute;
36.     top: 100px;
37.     bottom: 0;
38.     border-top: 2px solid green;
39.     left: 40px;
40.     width: 100px;  
41. }
42.    
43. .line4 {
44.     position: absolute;
45.     top: 20px;
46.     bottom: 0;
47.     border-left: 2px solid green;
48.     left: 138px;
49.     height:80px;
50. }
51.    
52. /*жёсткий костыль*/
53. .line5{
54.     position: absolute;
55.     top: 100px;
56.     bottom: 0;
57.     border-top: 2px solid white;
58.     left: 35px;
59.     width: 5px;
60.     transform-origin: 0 0;
61.     animation: center-animate5 2s ease infinite alternate;  
62. }
63.  
64. @keyframes center-animate {
65.     0% {
66.         transform: scaleX(5);
67.     }
68.     100% {
69.         transform: scaleX(1);
70.     }
71. }
72.    
73. @keyframes center-animate2 {
74.     0% {
75.         transform: translateX(80px);
76.     }
77.     100% {
78.         transform: translateX(0);
79.     }
80. }
81.    
82. @keyframes center-animate5 {
83.     0% {
84.         transform: scaleX(17);
85.     }
86.     100% {
87.         transform: scaleX(1);
88.     }
89. }