12
\$\begingroup\$

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

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

<div class="intro">
  <div class="logo">
    <div class="boxes" id="animateRed">
      <div class="box" id="red">
      </div>
    </div>
    <div class="boxes" id="animateGreen">
      <div class="box" id="green">
      </div>
    </div>
    <div class="boxes" id="animateYellow">
      <div class="box" id="yellow">
      </div>
    </div>
    <div class="boxes" id="animateBlue">
      <div class="box" id="blue">
      </div>
    </div>
  </div>
  <span class="brand">Microsoft</span>
</div>

\$\endgroup\$
  • 3
    \$\begingroup\$ It makes my head spin: stop it after the text appears, don't loop it! \$\endgroup\$ – o0'. Aug 17 '15 at 16:01
  • \$\begingroup\$ No animation happens on Safari; I just see a blue square. Works in Firefox, though. \$\endgroup\$ – 200_success Aug 18 '15 at 6:36
  • \$\begingroup\$ Oh yes, there are no vendor prefixes applied (yet). Thanks to all of you guys! \$\endgroup\$ – Lubos Aug 18 '15 at 8:53
6
\$\begingroup\$

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; 
}
\$\endgroup\$
  • \$\begingroup\$ When you posted the snippet I realised it's not working very well on mobile, should I input exact values? The problem with overlaying is due to me using % values in positioning and they blend on smaller screens. \$\endgroup\$ – Lubos Aug 17 '15 at 12:50
1
\$\begingroup\$

From appearance (running in stack exchange)

The Boxes overlap the text, so they're probably not set to be the proper position relative to the text.

The boxes inconsistently overlap each other. I think any overlap is somewhat weird, but an even overlap would be better.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.