Add css animation
This commit is contained in:
parent
a3ddddb131
commit
04a5e58e78
1 changed files with 23 additions and 0 deletions
23
src/css/animations.css
Normal file
23
src/css/animations.css
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
/* Transition for modal card appearing disappearing */
|
||||||
|
.top-slide-enter-active {
|
||||||
|
animation: top-slide-in 1s;
|
||||||
|
}
|
||||||
|
.top-slide-leave-active { animation: top-slide-out 1s; }
|
||||||
|
|
||||||
|
@keyframes top-slide-in {
|
||||||
|
0% {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes top-slide-out {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue