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)}
}

}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;

&lt;div class="intro"&gt;
  &lt;div class="logo"&gt;
    &lt;div class="boxes" id="animateRed"&gt;
      &lt;div class="box" id="red"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="boxes" id="animateGreen"&gt;
      &lt;div class="box" id="green"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="boxes" id="animateYellow"&gt;
      &lt;div class="box" id="yellow"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="boxes" id="animateBlue"&gt;
      &lt;div class="box" id="blue"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;span class="brand"&gt;Microsoft&lt;/span&gt;
&lt;/div&gt;
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)}
}

}
^ &lt;- Here





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


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