Rotate logo text

by jshacker

HTML

<div id="topBar">
  <div id="nameLogo" class="rotate round">A</div>
</div>

SCSS

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  10% {
    transform: rotate(10deg);
  }
  90% {
    transform: rotate(350deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#topBar {
  background-color: #333;
  height: 80px;
  padding: 10px 0;
  #nameLogo {
    height: 60px;
    width: 60px;
    line-height: 80px;
    text-align: right;
    margin: 10px 35px;
    background-color: #eee;
    color: black;
    text-shadow: 2px 2px 1px black;
    font-weight: bold;
    font-size: 50px;
  }
  .round {
    border-radius: 50%;
  }
  .rotate:hover {
    animation: rotate 2s infinite ease-out;
    amination-fill-mode: forwards;
  }
}