Логотип Авторезюме

Вариант анимации

by Alexey Ukolov

HTML

<header>
  <div class="logo">
    <div class="logo_car">
      <div class="wheel back"></div>
      <div class="wheel front"></div>
      <div class="shadow"></div>
    </div>
    <div class="logo_title"></div>
  </div>
  <nav>
    <ul>
      <li><a href="#">Пункт меню</a></li>
      <li><a href="#">Ещё один</a></li>
      <li><a href="#">Последний пункт</a></li>
    </ul>
  </nav>
</header>

CSS

.logo {
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
  width: 100px;
  transition: all 0.5s ease;
}

.logo:hover {
  width: 370px;
}

.logo_car {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 60px;
  background-color: transparent;
  background-image: url('https://habrastorage.org/webt/w9/wv/_9/w9wv_9wixfccosxnhkzvuasv5ly.png');
  background-size: contain;
  background-position: 0 50%;
  background-repeat: no-repeat;
  z-index: 1;
  transition: all 0.5s ease;
}

.logo:hover .logo_car {
  left: 270px;
  transition: left 0.6s linear;
  transform-origin: right center;
  animation: bobbing 0.2s infinite ease-in-out forwards alternate;
}

.logo_title {
  position: absolute;
  left: 20px;
  top: 0;
  width: 0;
  height: 60px;
  background-color: #ffffff;
  background-image: url('https://hsto.org/webt/gv/nz/jk/gvnzjkx55rzmxx9ntlwlgybw2ys.png');
  background-size: 240px auto;
  background-position: 0 11px;
  background-repeat: no-repeat;
  transition: all 0.5s ease;
}

.logo:hover .logo_title {
  width: 240px;
  transition: width 0.5s linear;
}

.wheel {
  opacity: 0;
  animation: spin 0.4s infinite linear;
  position: absolute;
}

.logo:hover .wheel {
  opacity: 1;
  transition: opacity 0.1s linear;
  transition-delay: 0.5s;
}

.wheel,
.wheel::after,
.wheel::before {
  bottom: 0.5px;
  width: 20px;
  height: 21px;
  border-radius: 100%;
  background: #262680;
}

.wheel.back {
  left: 32px;
}

.wheel.front {
  left: 69px;
}

.wheel::after,
.wheel::before {
  content: '';
  position: absolute;
  display: block;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
}

.wheel::before {
  background: #ffffff;
}

.wheel::after {
  top: 40%;
  left: 40%;
  width: 20%;
  height: 20%;
}

@keyframes bobbing {
  0% {
    transform: rotate(0) translateY(0);
  }
  100% {
    transform: rotate(0.25deg) translateY(2px);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes shadow {
 ...