123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197 |
- @mixin timing-function {
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
- }
- @keyframes #{$rt-namespace}__bounceInRight {
- from,
- 60%,
- 75%,
- 90%,
- to {
- @include timing-function;
- }
- from {
- opacity: 0;
- transform: translate3d(3000px, 0, 0);
- }
- 60% {
- opacity: 1;
- transform: translate3d(-25px, 0, 0);
- }
- 75% {
- transform: translate3d(10px, 0, 0);
- }
- 90% {
- transform: translate3d(-5px, 0, 0);
- }
- to {
- transform: none;
- }
- }
- @keyframes #{$rt-namespace}__bounceOutRight {
- 20% {
- opacity: 1;
- transform: translate3d(-20px, 0, 0);
- }
- to {
- opacity: 0;
- transform: translate3d(2000px, 0, 0);
- }
- }
- @keyframes #{$rt-namespace}__bounceInLeft {
- from,
- 60%,
- 75%,
- 90%,
- to {
- @include timing-function;
- }
- 0% {
- opacity: 0;
- transform: translate3d(-3000px, 0, 0);
- }
- 60% {
- opacity: 1;
- transform: translate3d(25px, 0, 0);
- }
- 75% {
- transform: translate3d(-10px, 0, 0);
- }
- 90% {
- transform: translate3d(5px, 0, 0);
- }
- to {
- transform: none;
- }
- }
- @keyframes #{$rt-namespace}__bounceOutLeft {
- 20% {
- opacity: 1;
- transform: translate3d(20px, 0, 0);
- }
- to {
- opacity: 0;
- transform: translate3d(-2000px, 0, 0);
- }
- }
- @keyframes #{$rt-namespace}__bounceInUp {
- from,
- 60%,
- 75%,
- 90%,
- to {
- @include timing-function;
- }
- from {
- opacity: 0;
- transform: translate3d(0, 3000px, 0);
- }
- 60% {
- opacity: 1;
- transform: translate3d(0, -20px, 0);
- }
- 75% {
- transform: translate3d(0, 10px, 0);
- }
- 90% {
- transform: translate3d(0, -5px, 0);
- }
- to {
- transform: translate3d(0, 0, 0);
- }
- }
- @keyframes #{$rt-namespace}__bounceOutUp {
- 20% {
- transform: translate3d(0, -10px, 0);
- }
- 40%,
- 45% {
- opacity: 1;
- transform: translate3d(0, 20px, 0);
- }
- to {
- opacity: 0;
- transform: translate3d(0, -2000px, 0);
- }
- }
- @keyframes #{$rt-namespace}__bounceInDown {
- from,
- 60%,
- 75%,
- 90%,
- to {
- @include timing-function;
- }
- 0% {
- opacity: 0;
- transform: translate3d(0, -3000px, 0);
- }
- 60% {
- opacity: 1;
- transform: translate3d(0, 25px, 0);
- }
- 75% {
- transform: translate3d(0, -10px, 0);
- }
- 90% {
- transform: translate3d(0, 5px, 0);
- }
- to {
- transform: none;
- }
- }
- @keyframes #{$rt-namespace}__bounceOutDown {
- 20% {
- transform: translate3d(0, 10px, 0);
- }
- 40%,
- 45% {
- opacity: 1;
- transform: translate3d(0, -20px, 0);
- }
- to {
- opacity: 0;
- transform: translate3d(0, 2000px, 0);
- }
- }
- .#{$rt-namespace}__bounce-enter {
- &--top-left,
- &--bottom-left {
- animation-name: #{$rt-namespace}__bounceInLeft;
- }
- &--top-right,
- &--bottom-right {
- animation-name: #{$rt-namespace}__bounceInRight;
- }
- &--top-center {
- animation-name: #{$rt-namespace}__bounceInDown;
- }
- &--bottom-center {
- animation-name: #{$rt-namespace}__bounceInUp;
- }
- }
- .#{$rt-namespace}__bounce-exit {
- &--top-left,
- &--bottom-left {
- animation-name: #{$rt-namespace}__bounceOutLeft;
- }
- &--top-right,
- &--bottom-right {
- animation-name: #{$rt-namespace}__bounceOutRight;
- }
- &--top-center {
- animation-name: #{$rt-namespace}__bounceOutUp;
- }
- &--bottom-center {
- animation-name: #{$rt-namespace}__bounceOutDown;
- }
- }
|