123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- .slide-in-right-enter-active {
- -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
- animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
- }
- .slide-in-right-leave-active {
- -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both reverse;
- animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both reverse;
- }
- @-webkit-keyframes slide-in-right {
- 0% {
- -webkit-transform: translateX(1000px);
- transform: translateX(1000px);
- opacity: 0;
- }
- 100% {
- -webkit-transform: translateX(0);
- transform: translateX(0);
- opacity: 1;
- }
- }
- @keyframes slide-in-right {
- 0% {
- -webkit-transform: translateX(1000px);
- transform: translateX(1000px);
- opacity: 0;
- }
- 100% {
- -webkit-transform: translateX(0);
- transform: translateX(0);
- opacity: 1;
- }
- }
- .slide-in-top-enter-active {
- -webkit-animation: slide-in-top 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
- animation: slide-in-top 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
- }
- .slide-in-top-leave-active {
- -webkit-animation: slide-in-top 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both reverse;
- animation: slide-in-top 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both reverse;
- }
- @-webkit-keyframes slide-in-top {
- 0% {
- -webkit-transform: translateY(-1000px);
- transform: translateY(-1000px);
- opacity: 0;
- }
- 100% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- opacity: 1;
- }
- }
- @keyframes slide-in-top {
- 0% {
- -webkit-transform: translateY(-1000px);
- transform: translateY(-1000px);
- opacity: 0;
- }
- 100% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- opacity: 1;
- }
- }
|