2018-02-23 03:33:12 +09:00
|
|
|
.zoom-in-top-enter-active,
|
|
|
|
.zoom-in-top-leave-active {
|
|
|
|
opacity: 1;
|
|
|
|
transform: scaleY(1);
|
|
|
|
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
|
|
|
transform-origin: center top;
|
|
|
|
}
|
|
|
|
.zoom-in-top-enter,
|
|
|
|
.zoom-in-top-leave-active {
|
|
|
|
opacity: 0;
|
|
|
|
transform: scaleY(0);
|
|
|
|
}
|
2018-12-16 11:32:20 +09:00
|
|
|
|
|
|
|
.entranceFromTop {
|
|
|
|
animation-duration: 0.5s;
|
|
|
|
animation-name: entranceFromTop;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes entranceFromTop {
|
|
|
|
from {
|
|
|
|
opacity: 0;
|
|
|
|
transform: translateY(-64px);
|
|
|
|
}
|
|
|
|
to {
|
|
|
|
opacity: 1;
|
|
|
|
transform: translateY(0);
|
|
|
|
}
|
|
|
|
}
|
2019-01-27 16:18:04 +09:00
|
|
|
|
|
|
|
@keyframes spin {
|
|
|
|
0% { transform: rotate(0deg); }
|
|
|
|
100% { transform: rotate(360deg); }
|
|
|
|
}
|
2019-01-27 19:12:45 +09:00
|
|
|
|
|
|
|
@keyframes jump {
|
|
|
|
0% { transform: translateY(0); }
|
|
|
|
25% { transform: translateY(-16px); }
|
|
|
|
50% { transform: translateY(0); }
|
|
|
|
75% { transform: translateY(-8px); }
|
|
|
|
100% { transform: translateY(0); }
|
|
|
|
}
|