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

27 votes365 views6 answers
Animation properties css
CSS
16 votes342 views5 answers
Scss loop
CSS
2 votes347 views2 answers
How to move text down in css
CSS
0 vote347 views1 answer
Font-strech css
CSS
5 votes388 views2 answers
Onclick reload an iframe
CSS
17 votes382 views2 answers
Solved - gulp : File C:\Users\Tech\AppData\Roaming\npm\gulp.ps1 cannot be loaded because running scripts is disabled on this system.
CSS
45 votes337 views6 answers
How to remove background color in css
CSS
9 votes361 views2 answers
Css percent scale checkbox
CSS
19 votes364 views2 answers
How to underline font in css
CSS
35 votes370 views4 answers
Css nth element
CSS