An animated loading navigation implemented in pure css3_html/css_WEB-ITnose

I have introduced several navigation menus to you before, and today I will bring you another animated loading navigation implemented in pure CSS3. The navigation appears as an animation. The renderings are as follows:

Online preview Source code download

Implemented code.

html code:

 <ul class="main-menu">        <li class="main-menu-item active"><a href="#">Home</a></li><li class="main-menu-item">            <a href="#">About Us</a></li><li class="main-menu-item"><a href="#">Another Link</a></li><li                class="main-menu-item"><a href="#">And another</a></li><li class="main-menu-item"><a                    href="#">Stuff</a></li><li class="main-menu-item"><a href="#">Help</a></li><li class="main-menu-item">                        <a href="#">Contact</a></li></ul>

css code:

   *, *:after, *:before {  -moz-box-sizing: border-box;       box-sizing: border-box;  margin: 0;  padding: 0;}html, body {  background: #f0f0f0;  font-family: Helvetica, sans-serif;  height: 100%;}.main-menu {  margin: auto;  width: 960px;  text-align: center;  position: relative;  list-style-type: none;  margin-top: 2em;}.main-menu::after,.main-menu-item.active::after {  content: '';  display: inline-block;  position: absolute;}.main-menu::after {  width: 70%;  height: 2px;  background: #9B1C27;  -webkit-animation: menuLine 1s ease forwards;          animation: menuLine 1s ease forwards;  -webkit-transform: scaleX(0);      -ms-transform: scaleX(0);          transform: scaleX(0);  bottom: 0;  left: 0;  right: 0;  margin: auto;  opacity: 0;}@-webkit-keyframes menuLine {  to {    -webkit-transform: scaleX(1);            transform: scaleX(1);    opacity: 1;  }}@keyframes menuLine {  to {    -webkit-transform: scaleX(1);            transform: scaleX(1);    opacity: 1;  }}@-webkit-keyframes menuItem {  to {    -webkit-transform: translateY(0);            transform: translateY(0);    opacity: 1;  }}@keyframes menuItem {  to {    -webkit-transform: translateY(0);            transform: translateY(0);    opacity: 1;  }}.main-menu-item a {  display: block;  padding: 1em;  text-decoration: none;  color: #555;  opacity: 0;  -webkit-transform: translateY(40%);      -ms-transform: translateY(40%);          transform: translateY(40%);  -webkit-animation: menuItem .8s ease forwards;          animation: menuItem .8s ease forwards;  -webkit-transition: all .2s ease;          transition: all .2s ease;}.main-menu-item:nth-child(4) a {  -webkit-animation-delay: .4s;          animation-delay: .4s;}.main-menu-item:nth-child(3) a, .main-menu-item:nth-child(5) a {  -webkit-animation-delay: .5s;          animation-delay: .5s;}.main-menu-item:nth-child(2) a, .main-menu-item:nth-child(6) a {  -webkit-animation-delay: .6s;          animation-delay: .6s;}.main-menu-item:nth-child(1) a, .main-menu-item:nth-child(7) a {  -webkit-animation-delay: .7s;          animation-delay: .7s;}.main-menu-item {  display: inline-block;  position: relative;}.main-menu-item:hover a, .main-menu-item.active {  color: #9B1C27;}.main-menu-item:hover a::after, .main-menu-item.active::after {  width: 0;  height: 0;  border-bottom: .5em solid #9B1C27;  border-left: .5em solid transparent;  border-right: .5em solid transparent;  bottom: 0;  left: 0;  right: 0;  margin: auto;  opacity: 0;  -webkit-transform: translateY(0.05em);      -ms-transform: translateY(0.05em);          transform: translateY(0.05em);  -webkit-animation: menuItem .8s 1.2s ease forwards;          animation: menuItem .8s 1.2s ease forwards;}