CSS

【CSS】シンプルなメニューアニメーションMenu animation with CSS3

December 24, 2017
Menu animation with CSS3

Menu AnimationはCSS3を使用したシンプルなメニューアニメーション。

How to contribute

index.html

<section class="navigation navigation-NEXT-NUMBER">
  <div class="title">Menu | NEXT-NUMBER</div>
  <ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Shop</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</section>

css/menu-animation.css

/***/
/*** NEXT-NUMBER ***/

.navigation-NEXT-NUMBER li a {
  transition: color 500ms ease-in-out;
}
.navigation-NEXT-NUMBER li a::before {
  height: 3px;
  background: #00A29A;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: scale3d(0, 1, 1);
  transition: transform 500ms;
}
.navigation-NEXT-NUMBER li:hover a {
  color: #00A29A;
}
.navigation-NEXT-NUMBER li.active a::before {
  transform: scale3d(1, 1, 1);
  transition: transform 500ms cubic-bezier(.57,1,.3,1.73);
}