Marcin Wojas
538 lines
11 KiB
SCSS
538 lines
11 KiB
SCSS
// // Animation
|
|
|
|
// /**
|
|
// * ----------------------------------------
|
|
// * slide in from top
|
|
// * ----------------------------------------
|
|
// */
|
|
// .animationLightSpeedIn :global {
|
|
// animation-duration: 0.8s;
|
|
// animation-fill-mode: both;
|
|
// animation-name: lightSpeedIn;
|
|
// animation-timing-function: ease-out;
|
|
// -webkit-animation-duration: 0.5s;
|
|
// -webkit-animation-fill-mode: both;
|
|
// -webkit-animation-name: lightSpeedIn;
|
|
// -webkit-animation-timing-function: ease-out;
|
|
// }
|
|
|
|
// @-webkit-keyframes lightSpeedIn {
|
|
// 0% {
|
|
// -webkit-transform: translateY(-100%);
|
|
// opacity: 0;
|
|
// }
|
|
|
|
// 60% {
|
|
// -webkit-transform: translateY(20%);
|
|
// opacity: 1;
|
|
// }
|
|
|
|
// 80% {
|
|
// -webkit-transform: translateY(0%);
|
|
// opacity: 1;
|
|
// }
|
|
|
|
// 100% {
|
|
// -webkit-transform: translateY(0%);
|
|
// opacity: 1;
|
|
// }
|
|
// }
|
|
|
|
// @keyframes lightSpeedIn {
|
|
// 0% {
|
|
// transform: translateY(-100%);
|
|
// opacity: 0;
|
|
// }
|
|
|
|
// 60% {
|
|
// transform: translateY(20%);
|
|
// opacity: 1;
|
|
// }
|
|
|
|
// 80% {
|
|
// transform: translateY(0%);
|
|
// opacity: 1;
|
|
// }
|
|
|
|
// 100% {
|
|
// transform: translateY(0%);
|
|
// opacity: 1;
|
|
// }
|
|
// }
|
|
|
|
// /**
|
|
// * ----------------------------------------
|
|
// * slide left and right
|
|
// * ----------------------------------------
|
|
// */
|
|
// .animationLightSpeedRollLeft :global {
|
|
// animation-duration: 0.5s;
|
|
// animation-fill-mode: both;
|
|
// animation-name: RollXLeft;
|
|
// animation-timing-function: ease-out;
|
|
// -webkit-animation-duration: 0.5s;
|
|
// -webkit-animation-fill-mode: both;
|
|
// -webkit-animation-name: RollXLeft;
|
|
// -webkit-animation-timing-function: ease-out;
|
|
// }
|
|
|
|
// @-webkit-keyframes RollXLeft {
|
|
// 0% {
|
|
// -webkit-transform: translateX(-100%);
|
|
// opacity: 0;
|
|
// }
|
|
|
|
// 60% {
|
|
// -webkit-transform: translateX(0%);
|
|
// opacity: 1;
|
|
// }
|
|
|
|
// 80% {
|
|
// -webkit-transform: translateX(0%);
|
|
// opacity: 1;
|
|
// }
|
|
|
|
// 100% {
|
|
// -webkit-transform: translateX(0%);
|
|
// opacity: 1;
|
|
// }
|
|
// }
|
|
|
|
// .animationLightSpeedRollRight :global {
|
|
// animation-duration: 0.5s;
|
|
// animation-fill-mode: both;
|
|
// animation-name: RollXRight;
|
|
// animation-timing-function: ease-out;
|
|
// -webkit-animation-duration: 0.5s;
|
|
// -webkit-animation-fill-mode: both;
|
|
// -webkit-animation-name: RollXRight;
|
|
// -webkit-animation-timing-function: ease-out;
|
|
// }
|
|
|
|
// @-webkit-keyframes RollXRight {
|
|
// 0% {
|
|
// -webkit-transform: translateX(100%);
|
|
// opacity: 0;
|
|
// }
|
|
|
|
// 60% {
|
|
// -webkit-transform: translateX(0%);
|
|
// opacity: 1;
|
|
// }
|
|
|
|
// 80% {
|
|
// -webkit-transform: translateX(0%);
|
|
// opacity: 1;
|
|
// }
|
|
|
|
// 100% {
|
|
// -webkit-transform: translateX(0%);
|
|
// opacity: 1;
|
|
// }
|
|
// }
|
|
|
|
// @-webkit-keyframes anim-open {
|
|
// 0% {
|
|
// opacity: 0;
|
|
// -webkit-transform: scale3d(0, 0, 1);
|
|
// }
|
|
|
|
// 100% {
|
|
// opacity: 1;
|
|
// -webkit-transform: scale3d(1, 1, 1);
|
|
// }
|
|
// }
|
|
|
|
// @-webkit-keyframes anim-close {
|
|
// 0% {
|
|
// opacity: 0;
|
|
// -webkit-transform: scale3d(0, 0, 1);
|
|
// }
|
|
|
|
// 100% {
|
|
// opacity: 1;
|
|
// -webkit-transform: scale3d(1, 1, 1);
|
|
// }
|
|
// }
|
|
|
|
// @keyframes anim-open {
|
|
// 0% {
|
|
// opacity: 0;
|
|
// transform: scale3d(0, 0, 1);
|
|
// }
|
|
|
|
// 100% {
|
|
// opacity: 1;
|
|
// transform: scale3d(1, 1, 1);
|
|
// }
|
|
// }
|
|
|
|
// @keyframes anim-close {
|
|
// 0% {
|
|
// opacity: 0;
|
|
// transform: scale3d(0, 0, 1);
|
|
// }
|
|
|
|
// 100% {
|
|
// opacity: 1;
|
|
// transform: scale3d(1, 1, 1);
|
|
// }
|
|
// }
|
|
|
|
// /**
|
|
// * ----------------------------------------
|
|
// * BounceIn
|
|
// * ----------------------------------------
|
|
// */
|
|
// @-webkit-keyframes bounceIn {
|
|
// 0%, 20%, 40%, 60%, 80%, 100% {
|
|
// -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
// transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
// }
|
|
|
|
// 0% {
|
|
// opacity: 0;
|
|
// -webkit-transform: scale3d(.3, .3, .3);
|
|
// transform: scale3d(.3, .3, .3);
|
|
// }
|
|
|
|
// 20% {
|
|
// -webkit-transform: scale3d(1.1, 1.1, 1.1);
|
|
// transform: scale3d(1.1, 1.1, 1.1);
|
|
// }
|
|
|
|
// 40% {
|
|
// -webkit-transform: scale3d(.9, .9, .9);
|
|
// transform: scale3d(.9, .9, .9);
|
|
// }
|
|
|
|
// 60% {
|
|
// opacity: 1;
|
|
// -webkit-transform: scale3d(1.03, 1.03, 1.03);
|
|
// transform: scale3d(1.03, 1.03, 1.03);
|
|
// }
|
|
|
|
// 80% {
|
|
// -webkit-transform: scale3d(.97, .97, .97);
|
|
// transform: scale3d(.97, .97, .97);
|
|
// }
|
|
|
|
// 100% {
|
|
// opacity: 1;
|
|
// -webkit-transform: scale3d(1, 1, 1);
|
|
// transform: scale3d(1, 1, 1);
|
|
// }
|
|
// }
|
|
|
|
// @keyframes bounceIn {
|
|
// 0%, 20%, 40%, 60%, 80%, 100% {
|
|
// -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
// transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
// }
|
|
|
|
// 0% {
|
|
// opacity: 0;
|
|
// -webkit-transform: scale3d(.3, .3, .3);
|
|
// transform: scale3d(.3, .3, .3);
|
|
// }
|
|
|
|
// 20% {
|
|
// -webkit-transform: scale3d(1.1, 1.1, 1.1);
|
|
// transform: scale3d(1.1, 1.1, 1.1);
|
|
// }
|
|
|
|
// 40% {
|
|
// -webkit-transform: scale3d(.9, .9, .9);
|
|
// transform: scale3d(.9, .9, .9);
|
|
// }
|
|
|
|
// 60% {
|
|
// opacity: 1;
|
|
// -webkit-transform: scale3d(1.03, 1.03, 1.03);
|
|
// transform: scale3d(1.03, 1.03, 1.03);
|
|
// }
|
|
|
|
// 80% {
|
|
// -webkit-transform: scale3d(.97, .97, .97);
|
|
// transform: scale3d(.97, .97, .97);
|
|
// }
|
|
|
|
// 100% {
|
|
// opacity: 1;
|
|
// -webkit-transform: scale3d(1, 1, 1);
|
|
// transform: scale3d(1, 1, 1);
|
|
// }
|
|
// }
|
|
|
|
// /**
|
|
// * ----------------------------------------
|
|
// * FadeInUp
|
|
// * ----------------------------------------
|
|
// */
|
|
// @-webkit-keyframes fadeInUp {
|
|
// 0% {
|
|
// opacity: 0;
|
|
// -webkit-transform: translate3d(0, 100%, 0);
|
|
// transform: translate3d(0, 100%, 0);
|
|
// }
|
|
|
|
// 100% {
|
|
// opacity: 1;
|
|
// -webkit-transform: none;
|
|
// transform: none;
|
|
// }
|
|
// }
|
|
|
|
// @keyframes fadeInUp {
|
|
// 0% {
|
|
// opacity: 0;
|
|
// -webkit-transform: translate3d(0, 100%, 0);
|
|
// transform: translate3d(0, 100%, 0);
|
|
// }
|
|
|
|
// 100% {
|
|
// opacity: 1;
|
|
// -webkit-transform: none;
|
|
// transform: none;
|
|
// }
|
|
// }
|
|
|
|
|
|
// /**
|
|
// * ----------------------------------------
|
|
// * FadeOutDown
|
|
// * ----------------------------------------
|
|
// */
|
|
|
|
// @-webkit-keyframes fadeOutDown {
|
|
// 0% {
|
|
// opacity: 1;
|
|
// -webkit-transform: translateY(0%);
|
|
// transform: translateY(0%);
|
|
// }
|
|
|
|
// 100% {
|
|
// opacity: 0;
|
|
// -webkit-transform: translateY(100%);
|
|
// transform: translateY(100%);
|
|
// }
|
|
// }
|
|
|
|
// @keyframes fadeOutDown {
|
|
// 0% {
|
|
// opacity: 1;
|
|
// -webkit-transform: translateY(0%);
|
|
// transform: translateY(0%);
|
|
// }
|
|
|
|
// 100% {
|
|
// opacity: 0;
|
|
// -webkit-transform: translateY(100%);
|
|
// transform: translateY(100%);
|
|
// }
|
|
// }
|
|
|
|
|
|
// /**
|
|
// * ----------------------------------------
|
|
// * LightSpeedIn
|
|
// * ----------------------------------------
|
|
// */
|
|
// .lightSpeedIn :global {
|
|
// -webkit-animation-name: lightSpeedIn;
|
|
// animation-name: lightSpeedIn;
|
|
// -webkit-animation-timing-function: ease-out;
|
|
// animation-timing-function: ease-out;
|
|
// -webkit-animation-duration: 1s;
|
|
// animation-duration: 1s;
|
|
// -webkit-animation-fill-mode: both;
|
|
// animation-fill-mode: both;
|
|
// }
|
|
|
|
// @-webkit-keyframes lightSpeedIn {
|
|
// 0% {
|
|
// -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
|
|
// transform: translate3d(100%, 0, 0) skewX(-30deg);
|
|
// opacity: 0;
|
|
// }
|
|
|
|
// 60% {
|
|
// -webkit-transform: skewX(20deg);
|
|
// transform: skewX(20deg);
|
|
// opacity: 1;
|
|
// }
|
|
|
|
// 80% {
|
|
// -webkit-transform: skewX(-5deg);
|
|
// transform: skewX(-5deg);
|
|
// opacity: 1;
|
|
// }
|
|
|
|
// 100% {
|
|
// -webkit-transform: none;
|
|
// transform: none;
|
|
// opacity: 1;
|
|
// }
|
|
// }
|
|
|
|
// @keyframes lightSpeedIn {
|
|
// 0% {
|
|
// -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
|
|
// transform: translate3d(100%, 0, 0) skewX(-30deg);
|
|
// opacity: 0;
|
|
// }
|
|
|
|
// 60% {
|
|
// -webkit-transform: skewX(20deg);
|
|
// transform: skewX(20deg);
|
|
// opacity: 1;
|
|
// }
|
|
|
|
// 80% {
|
|
// -webkit-transform: skewX(-5deg);
|
|
// transform: skewX(-5deg);
|
|
// opacity: 1;
|
|
// }
|
|
|
|
// 100% {
|
|
// -webkit-transform: none;
|
|
// transform: none;
|
|
// opacity: 1;
|
|
// }
|
|
// }
|
|
|
|
|
|
// /**
|
|
// * ----------------------------------------
|
|
// * animation shadow-drop-center
|
|
// * ----------------------------------------
|
|
// */
|
|
// @-webkit-keyframes shadow-drop-center {
|
|
// 0% {
|
|
// -webkit-transform: translateZ(0);
|
|
// transform: translateZ(0);
|
|
// box-shadow: 0 0 0 0 rgba($pureBlack, 0);
|
|
// }
|
|
|
|
// 100% {
|
|
// -webkit-transform: translateZ(50px);
|
|
// transform: translateZ(50px);
|
|
// box-shadow: 0 0 20px 0px rgba($pureBlack, 0.35);
|
|
// }
|
|
// }
|
|
|
|
// @keyframes shadow-drop-center {
|
|
// 0% {
|
|
// -webkit-transform: translateZ(0);
|
|
// transform: translateZ(0);
|
|
// box-shadow: 0 0 0 0 rgba($pureBlack, 0);
|
|
// }
|
|
|
|
// 100% {
|
|
// -webkit-transform: translateZ(50px);
|
|
// transform: translateZ(50px);
|
|
// box-shadow: 0 0 20px 0px rgba($pureBlack, 0.35);
|
|
// }
|
|
// }
|
|
|
|
// /**
|
|
// * ----------------------------------------
|
|
// * animation shadow-inset-center
|
|
// * ----------------------------------------
|
|
// */
|
|
// @-webkit-keyframes shadow-inset-center {
|
|
// 0% {
|
|
// box-shadow: inset 0 0 0 0 rgba($pureBlack, 0);
|
|
// }
|
|
|
|
// 100% {
|
|
// box-shadow: inset 0 0 14px 0px rgba($pureBlack, 0.5);
|
|
// }
|
|
// }
|
|
|
|
// @keyframes shadow-inset-center {
|
|
// 0% {
|
|
// box-shadow: 0 0 20px 0px rgba($pureBlack, 0.35);
|
|
// }
|
|
|
|
// 100% {
|
|
// box-shadow: 0 0 1px 1px rgba(175, 175, 175, 0.1), 0 0 1px 1px rgba(175, 175, 175, 0.2);
|
|
// }
|
|
// }
|
|
|
|
|
|
|
|
// /**
|
|
// * ----------------------------------------
|
|
// * animation swing-in-top-fwd
|
|
// * ----------------------------------------
|
|
// */
|
|
// @-webkit-keyframes swing-in-top-fwd {
|
|
// 0% {
|
|
// -webkit-transform: rotateX(-100deg);
|
|
// transform: rotateX(-100deg);
|
|
// -webkit-transform-origin: top;
|
|
// transform-origin: top;
|
|
// opacity: 0;
|
|
// }
|
|
|
|
// 100% {
|
|
// -webkit-transform: rotateX(0deg);
|
|
// transform: rotateX(0deg);
|
|
// -webkit-transform-origin: top;
|
|
// transform-origin: top;
|
|
// opacity: 1;
|
|
// }
|
|
// }
|
|
|
|
// @keyframes swing-in-top-fwd {
|
|
// 0% {
|
|
// -webkit-transform: rotateX(-100deg);
|
|
// transform: rotateX(-100deg);
|
|
// -webkit-transform-origin: top;
|
|
// transform-origin: top;
|
|
// opacity: 0;
|
|
// }
|
|
|
|
// 100% {
|
|
// -webkit-transform: rotateX(0deg);
|
|
// transform: rotateX(0deg);
|
|
// -webkit-transform-origin: top;
|
|
// transform-origin: top;
|
|
// opacity: 1;
|
|
// }
|
|
// }
|
|
|
|
// /**
|
|
// * ----------------------------------------
|
|
// * animation flip-in-hor-bottom
|
|
// * ----------------------------------------
|
|
// */
|
|
// @-webkit-keyframes flip-in-hor-bottom {
|
|
// 0% {
|
|
// -webkit-transform: rotateX(80deg);
|
|
// transform: rotateX(80deg);
|
|
// opacity: 0;
|
|
// }
|
|
|
|
// 100% {
|
|
// -webkit-transform: rotateX(0);
|
|
// transform: rotateX(0);
|
|
// opacity: 1;
|
|
// }
|
|
// }
|
|
|
|
// @keyframes flip-in-hor-bottom {
|
|
// 0% {
|
|
// -webkit-transform: rotateX(80deg);
|
|
// transform: rotateX(80deg);
|
|
// opacity: 0;
|
|
// }
|
|
|
|
// 100% {
|
|
// -webkit-transform: rotateX(0);
|
|
// transform: rotateX(0);
|
|
// opacity: 1;
|
|
// }
|
|
// }
|