Skip to content

Instantly share code, notes, and snippets.

@ivo-ivanov
Created April 29, 2020 12:59
Show Gist options
  • Save ivo-ivanov/7c0f5c7a5cd1b58804f1b1a46f230f80 to your computer and use it in GitHub Desktop.
Save ivo-ivanov/7c0f5c7a5cd1b58804f1b1a46f230f80 to your computer and use it in GitHub Desktop.
Nav reveal css animation #css
.active-nav nav li {
animation: navreveal .25s;
animation-fill-mode: forwards;
animation-timing-function: ease;
transform: translateY(66%);
}
.active-nav nav li:nth-child(1) {
animation-delay: .6s;
}
.active-nav nav li:nth-child(2) {
animation-delay: .8s;
}
.active-nav nav li:nth-child(3) {
animation-delay: 1s;
}
.active-nav nav li:nth-child(4) {
animation-delay: 1.2s;
}
.active-nav nav li:nth-child(5) {
animation-delay: 1.4s;
}
.active-nav nav li:nth-child(6) {
animation-delay: 1.6s;
}
@-webkit-keyframes navreveal {
0% {
-webkit-transform: translateY(66%);
transform: translateY(66%);
opacity: 0
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
}
@keyframes navreveal {
0% {
-webkit-transform: translateY(66%);
transform: translateY(66%);
opacity: 0
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment