1. Copy class suffix
gb-popup-bounce-to-bottom
2. Copy CSS code
.visible-section .gb-popup-bounce-to-bottom,
.visible-lightbox .gb-popup-bounce-to-bottom {
animation: gb-popup-bounce-to-bottom 1.1s both;
}
@keyframes gb-popup-bounce-to-bottom {
0% {transform: translateY(-500px);animation-timing-function: ease-in;opacity: 0;}
38% {transform: translateY(0);animation-timing-function: ease-out;opacity: 1;}
55% {transform: translateY(-65px);animation-timing-function: ease-in;}
72% {transform: translateY(0);animation-timing-function: ease-out;}
81% {transform: translateY(-28px);animation-timing-function: ease-in;}
90% {transform: translateY(0);animation-timing-function: ease-out;}
95% {transform: translateY(-8px);animation-timing-function: ease-in;}
100% {transform: translateY(0);animation-timing-function: ease-out;}
}
1. Copy class suffix
gb-popup-bounce-to-left
2. Copy CSS code
.visible-section .gb-popup-bounce-to-left,
.visible-lightbox .gb-popup-bounce-to-left {
animation: gb-popup-bounce-to-left 1.1s both;
}
@keyframes gb-popup-bounce-to-left {
0% {transform: translateX(600px);animation-timing-function: ease-in;opacity: 0;}
38% {transform: translateX(0);animation-timing-function: ease-out;opacity: 1;}
55% {transform: translateX(68px);animation-timing-function: ease-in;}
72% {transform: translateX(0);animation-timing-function: ease-out;}
81% {transform: translateX(32px);animation-timing-function: ease-in;}
90% {transform: translateX(0);animation-timing-function: ease-out;}
95% {transform: translateX(8px);animation-timing-function: ease-in;}
100% {transform: translateX(0);animation-timing-function: ease-out;}
}
1. Copy class suffix
gb-popup-bounce-to-right
2. Copy CSS code
.visible-section .gb-popup-bounce-to-right,
.visible-lightbox .gb-popup-bounce-to-right {
animation: gb-popup-bounce-to-right 1.1s both;
}
@keyframes gb-popup-bounce-to-right {
0% {transform: translateX(-600px);animation-timing-function: ease-in;opacity: 0;}
38% {transform: translateX(0);animation-timing-function: ease-out;opacity: 1;}
55% {transform: translateX(-68px);animation-timing-function: ease-in;}
72% {transform: translateX(0);animation-timing-function: ease-out;}
81% {transform: translateX(-28px);animation-timing-function: ease-in;}
90% {transform: translateX(0);animation-timing-function: ease-out;}
95% {transform: translateX(-8px);animation-timing-function: ease-in;}
100% {transform: translateX(0);animation-timing-function: ease-out;}
}
1. Copy class suffix
gb-popup-bounce-to-top
2. Copy CSS code
.visible-section .gb-popup-bounce-to-top,
.visible-lightbox .gb-popup-bounce-to-top {
animation: gb-popup-bounce-to-top 1.1s both;
}
@keyframes gb-popup-bounce-to-top {
0% {transform: translateY(500px);animation-timing-function: ease-in;opacity: 0;}
38% {transform: translateY(0);animation-timing-function: ease-out;opacity: 1;}
55% {transform: translateY(65px);animation-timing-function: ease-in;}
72% {transform: translateY(0);animation-timing-function: ease-out;}
81% {transform: translateY(28px);animation-timing-function: ease-in;}
90% {transform: translateY(0);animation-timing-function: ease-out;}
95% {transform: translateY(8px);animation-timing-function: ease-in;}
100% {transform: translateY(0);animation-timing-function: ease-out;}
}
1. Copy class suffix
gb-popup-scale
2. Copy CSS code
.gb-popup-scale {
opacity: 0;
transform: scale(2);
transition: all 0.3s;
}
.visible-section .gb-popup-scale,
.visible-lightbox .gb-popup-scale {
transform: scale(1);
opacity: 1;
}
1. Copy class suffix
gb-popup-scale-blur
2. Copy CSS code
@keyframes gb-popup-scale-blur {
0% {opacity: 0;transform-origin: 50% 50%;transform: scale(2, 2);filter: blur(90px);}
100% {opacity: 1;transform-origin: 50% 50%;transform: scale(1, 1);filter: blur(0px);}
}
.visible-section .gb-popup-scale-blur,
.visible-lightbox .gb-popup-scale-blur {
animation: gb-popup-scale-blur 1s both;
}
1. Copy class suffix
gb-popup-scale-tada
2. Copy CSS code
.visible-section .gb-popup-scale-tada,
.visible-lightbox .gb-popup-scale-tada {
animation: gb-popup-scale-tada 1.1s both;
}
@keyframes gb-popup-scale-tada {
0% {transform: scale3d(1, 1, 1);}
10%, 20% {transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);}
30%, 50%, 70%, 90% {transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);}
40%, 60%, 80% {transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);}
100% {transform: scale3d(1, 1, 1);}
}
1. Copy class suffix
gb-popup-cube
2. Copy CSS code
.visible-section > .ba-wrapper,
.visible-lightbox .ba-lightbox {
perspective: 1000px;
}
.gb-popup-cube {
transform: rotateX(90deg) translateY(-22px);
opacity: 0;
}
.visible-section .gb-popup-cube,
.visible-lightbox .gb-popup-cube {
transform: rotateX(0) translateY(0);
transform-origin: 50% 0;
transform-style: preserve-3d;
transition: transform 0.8s;
opacity: 1;
}
.gb-popup-cube:after {
align-items: center;
backface-visibility: hidden;
background: inherit;
content: "";
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 100%;
transform-origin: 50% 0;
transform: rotateX(-90deg);
transition: background 0.8s;
width: 100%;
}
1. Copy class suffix
gb-popup-swing
2. Copy CSS code
@keyframes gb-popup-swing {
0% { transform: rotate(0deg) translate3d(0, 0, 0);}
25% { transform: rotate(6deg) translate3d(0, 0, 0);}
50% { transform: rotate(-6deg) translate3d(0, 0, 0);}
75% { transform: rotate(3deg) translate3d(0, 0, 0);}
100% { transform: rotate(0deg) translate3d(0, 0, 0);}
}
.visible-section .gb-popup-swing,
.visible-lightbox .gb-popup-swing {
animation: gb-popup-swing 0.7s ease-in-out both;
}
@keyframes gb-popup-swing {
0% { transform: translate3d(0, 0, 0) translateZ(0);}
25% { transform: translate3d(8px, 0, 0) translateZ(0);}
50% { transform: translate3d(-6px, 0, 0) translateZ(0);}
75% { transform: translate3d(4px, 0, 0) translateZ(0);}
100% { transform: translate3d(0, 0, 0) translateZ(0);}
}
.visible-section .gb-popup-swing .ba-section-items,
.visible-lightbox .gb-popup-swing .ba-section-items {
animation: effect-9 0.7s ease-in-out;
animation-delay: 0.06s;
}
1. Copy class suffix
gb-popup-flip
2. Copy CSS code
.visible-section > .ba-wrapper,
.visible-lightbox {
perspective: 1300px;
}
.gb-popup-flip {
transform-style: preserve-3d;
transform: rotateX(-70deg);
transition: all 0.3s;
opacity: 0;
}
.visible-section .gb-popup-flip,
.visible-lightbox .gb-popup-flip {
transform: rotateX(0deg);
opacity: 1;
}
1. Copy class suffix
gb-popup-flip-page
2. Copy CSS code
@-webkit-keyframes gb-popup-flip-page {
100% {opacity: 1;transform-origin: 0 0;transform: perspective(800px) rotateY(0deg) translateZ(0px);}
0% {opacity: 0;transform-origin: 50% 0;transform: perspective(800px) rotateY(-180deg) translateZ(300px);}
}
.visible-section .gb-popup-flip-page,
.visible-lightbox .gb-popup-flip-page {
animation: gb-popup-flip-page 1s both;
}
1. Copy class suffix
gb-popup-flip-bounce
2. Copy CSS code
@keyframes gb-popup-flip-bounce {
from {transform: perspective(400px) rotate3d(0, 1, 0, 90deg);animation-timing-function: ease-in;opacity: 1;}
40% {transform: perspective(400px) rotate3d(0, 1, 0, -20deg);animation-timing-function: ease-in;}
60% {transform: perspective(400px) rotate3d(0, 1, 0, 10deg);opacity: 1;}
80% {transform: perspective(400px) rotate3d(0, 1, 0, -5deg);}
to {transform: perspective(400px);}
}
.visible-section .gb-popup-flip-bounce,
.visible-lightbox .gb-popup-flip-bounce {
animation: gb-popup-flip-bounce 2s linear;
}
1. Copy class suffix
gb-popup-flip-raise
2. Copy CSS code
@keyframes gb-popup-flip-raise {
0% {opacity: 0;transform-origin: 50% 0%;transform: perspective(800px) rotateX(-90deg);}
50% {opacity: 1;transform-origin: 50% 0%;transform: perspective(800px) rotateX(50deg);}
100% {opacity: 1;transform-origin: 50% 0%;transform: perspective(800px) rotateX(0deg);}
}
.visible-section .gb-popup-flip-raise,
.visible-lightbox .gb-popup-flip-raise {
animation: gb-popup-flip-raise 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
1. Copy class suffix
gb-popup-flip-newspaper
2. Copy CSS code
.visible-section > .ba-wrapper,
.visible-lightbox {
perspective: 1300px;
}
.gb-popup-flip-newspaper {
opacity: 0;
transform: scale(0) rotate(720deg);
transition: all 0.3s;
}
.visible-section .gb-popup-flip-newspaper,
.visible-lightbox .gb-popup-flip-newspaper {
transform: scale(1) rotate(0deg);
opacity: 1;
}
1. Copy class suffix
gb-popup-slide-zoom-left
2. Copy CSS code
@keyframes gb-popup-slide-zoom-left {
0% {opacity: 0;transform-origin: 100% 50%;transform: scale(0.2) translate(200%, 0%);}
100% {opacity: 1;transform-origin: 100% 50%;transform: scale(1) translate(0%, 0%);}
}
.visible-section .gb-popup-slide-zoom-left,
.visible-lightbox .gb-popup-slide-zoom-left {
animation: gb-popup-slide-zoom-left 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
1. Copy class suffix
gb-popup-slide-zoom-right
2. Copy CSS code
@keyframes gb-popup-slide-zoom-right {
0% {opacity: 0;transform-origin: 0% 50%;transform: scale(0.2) translate(-200%, 0%);}
100% {opacity: 1;transform-origin: 0% 50%;transform: scale(1) translate(0%, 0%);}
}
.visible-section .gb-popup-slide-zoom-right,
.visible-lightbox .gb-popup-slide-zoom-right {
animation: gb-popup-slide-zoom-right 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
1. Copy class suffix
gb-popup-slide-flip
2. Copy CSS code
.visible-section {
perspective: 1300px;
}
.gb-popup-slide-flip,
.gb-popup-slide-flip {
transform-style: preserve-3d;
transform: translateZ(100px) translateX(-30%) rotateY(90deg);
transform-origin: 0 100%;
opacity: 0;
transition: all 0.3s;
}
.visible-section .gb-popup-slide-flip,
.visible-lightbox .gb-popup-slide-flip {
transform: translateZ(0px) translateX(0%) rotateY(0deg);
opacity: 1;
}
1. Copy class suffix
gb-popup-slide-tada-left
2. Copy CSS code
@keyframes gb-popup-slide-tada-left {
0% {opacity: 0;transform: scale(1, 1) translateX(200%);}
50%,70%,90% {opacity: 1;transform: scale(1.1, 1.1) translateX(0);}
60%,80%,100% {opacity: 1;transform: scale(1, 1) translateX(0);}
}
.visible-section .gb-popup-slide-tada-left,
.visible-lightbox .gb-popup-slide-tada-left {
animation: gb-popup-slide-tada-left 1s linear !important;
}
1. Copy class suffix
gb-popup-slide-tada-right
2. Copy CSS code
@keyframes gb-popup-slide-tada-right {
0% {opacity: 0;transform: scale(1, 1) translateX(-200%);}
50%,70%, 90% {opacity: 1;transform: scale(1.1, 1.1) translateX(0);}
60%,80%,100% {opacity: 1;transform: scale(1, 1) translateX(0);}
}
.visible-section .gb-popup-slide-tada-right,
.visible-lightbox .gb-popup-slide-tada-right {
animation: gb-popup-slide-tada-right 1s linear !important;
}
1. Copy class suffix
gb-popup-slide-zoom-diagonal
2. Copy CSS code
@keyframes gb-popup-slide-zoom-diagonal {
0% {opacity: 0;transform-origin: 0 100%;transform: scale(0, 0) translate(-700px, 0px);}
100% {opacity: 1;transform-origin: 100% 100%;transform: scale(1, 1) translate(0px, 0px);}
}
.visible-section .gb-popup-slide-zoom-diagonal,
.visible-lightbox .gb-popup-slide-zoom-diagonal {
animation: gb-popup-slide-zoom-diagonal 1s both;
}