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 vote133 views1 answer
Highlight table row on hover
CSS
15 votes143 views3 answers
Loops scss
CSS
36 votes138 views2 answers
Css translate x and y
CSS
0 vote160 views1 answer
Css battle 54 char
CSS
7 votes129 views1 answer
Change background input css
CSS
22 votes151 views3 answers
Remove styling from a tag
CSS
1 vote137 views1 answer
Background color for whole page css
CSS
2 votes136 views2 answers
Css change image color
CSS
5 votes158 views1 answer
Disregard incoming git pull and return to last commit
CSS
1 vote150 views1 answer
Ionchips scroll x
CSS