Microsoft logo animation

I made an animation of the Microsoft logo. It's available as a CodePen doodle, also. Would anyone be so kind as to check my style and say if there is anything I could've improved? (I am sure there is.)



$(document).ready(function(){
$(".logo").click(function(){
$(this).toggleClass("turnOffAnimation");
$(".brand").toggleClass("turnOffAnimation");
});
});
body {
background: hsl(30, 20%, 20%);
color: #fff;
font-family: 'Open Sans', sans-serif;
}

.boxes {
animation: logo 4s infinite;
position: absolute;
}

.box {
animation: scaling 1s infinite;
height: 50px;
width: 50px;
}

.brand {
animation: fadein 2s ease 3s forwards;
display: inline-block;
font-size: 36px;
left: 40%;
margin: 30px 0 0 20px;
opacity: 0;
position: absolute;
top: 40%;
z-index: 0;
}

.intro {
text-align: center;
}

.logo {
animation: moveLeft .5s linear 3s forwards;
display: inline-block;
left: 50%;
position: absolute;
top: 40%;
z-index: 1;
}

.turnOffAnimation {
animation-name: none;
}

#red {background: #f65314;}
#green {background: #7cbb00;}
#yellow {background: #ffbb00;}
#blue {background: #00a1f1;}

#animateRed {animation-delay: 3s;}
#animateGreen {animation-delay: 2s;}
#animateYellow {animation-delay: 1s;}
#animateBlue {animation-delay: 0s;}

@keyframes fadein {
from {opacity: 0; left: 40%}
to {opacity: 1; left: 50%;}
}

@keyframes logo {
0%, 100% {left: 0px; top: 0px; transform: rotate(0deg)}
25% {left: 50px; top: 0px; transform: rotate(180deg)}
50% {left: 50px; top: 50px; transform: rotate(0deg)}
75% {left: 0px; top: 50px; transform: rotate(-180deg)}
}

@keyframes moveLeft {
from {left: 50%}
to {left: 40%}
}

@keyframes scaling {
0%, 100% {transform: scale(1)}
50% {transform: scale(.5)}
}

}




















Microsoft


Points of improvement:

• The animation moves a bit faster than a traditional logo animation would.

• When the window is too small, the brand and the boxes overlap.

There's an extraneous bracket at the end of your CSS file:

@keyframes scaling {
  0%, 100% {transform: scale(1)}
  50% {transform: scale(.5)}
}

}
^ <- Here

If you're not against one line CSS rules, you could convert the following:

.turnOffAnimation {
  animation-name: none;
}
.intro {
  text-align: center; 
}

StackExchange Code Review Q#101172, answer score: 6