Animation clip path

.down-enter-active { animation: 1s down-enter; }
.down-leave-active { animation: 1s down-leave; }

@keyframes down-enter {
  0% { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0); }
}

@keyframes down-leave {
  0% { clip-path: inset(0); }
  100% { clip-path: inset(100% 0 0 0); }
}

Source: css-tricks.com

Similar codes

-1 vote347 views2 answers
Navigation bar css
CSS
0 vote329 views1 answer
SCSS Auto link coloured button style
CSS
0 vote247 views1 answer
Which bootstrap css class will you use to put the navbar at the top of the page? feel free to check out the bootstrap website.
CSS
10 votes293 views3 answers
Hiding text css and leaving whitespace
CSS
7 votes294 views2 answers
Css comic sans
CSS
4 votes292 views2 answers
Javafx button css
CSS
0 vote310 views1 answer
Css last item should be flex end
CSS
1 vote288 views1 answer
Css everything under element
CSS
2 votes290 views2 answers
Css change image color
CSS
0 vote299 views1 answer
Css calc function
CSS