20 Stylish Lightbox Animation For Joomla Website Builder Gridbox

02 April 2020

The lightbox is an excellent way to showcase your business proposal. This fun element with attractive animation effects will add life to your website and increase the number of customers. And today we’re going to show you how to add an eye-catching and stylish animation for the lightbox of Joomla Website Builder Gridbox. These tips & tricks you can use for your existing or next project and take your website to the next level. So let's do it!

View Demo

Step 1: Copy Class Suffix.

Copy class suffix of the animation you like. Class Suffix should be placed in the field "Class Suffix" of the plugin Overlay Section or Lightbox.

Step 2: Copy CSS Code of Lightbox Effect.

Copy CSS code of the lightbox effect and paste to the Gridbox Code Editor.

Bounce Lightbox Effects

Class Suffix: custom-effect-1

.visible-section .custom-effect-1,
.visible-lightbox .custom-effect-1 {
    animation: effect-1 1.1s both;
}

@keyframes effect-1 {
    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;}
}

Class Suffix: custom-effect-2

.visible-section .custom-effect-2,
.visible-lightbox .custom-effect-2 {
    animation: effect-2 1.1s both;
}

@keyframes effect-2 {
    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;}
}

Class Suffix: custom-effect-3

.visible-section .custom-effect-3,
.visible-lightbox .custom-effect-3 {
    animation: effect-3 1.1s both;
}

@keyframes effect-3 {
    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;}
}

Class Suffix: custom-effect-4

.visible-section .custom-effect-4,
.visible-lightbox .custom-effect-4 {
    animation: effect-4 1.1s both;
}

@keyframes effect-4 {
    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;}
}

Scale Lightbox Effects

Class Suffix: custom-effect-5

.custom-effect-5 {
    opacity: 0;
    transform: scale(2);
    transition: all 0.3s;
}

.visible-section .custom-effect-5,
.visible-lightbox .custom-effect-5 {
    transform: scale(1);
    opacity: 1;
}

Class Suffix: custom-effect-6

@keyframes hover-6 {
    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 .custom-effect-6,
.visible-lightbox .custom-effect-6 {
    animation: hover-6 1s  both;
}

Class Suffix: custom-effect-7

.visible-section .custom-effect-7,
.visible-lightbox .custom-effect-7 {
    animation: effect-7 1.1s both;
}

@keyframes effect-7 {
    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);}
}

3D Lightbox Effects

Class Suffix: custom-effect-8

.visible-section > .ba-wrapper,
.visible-lightbox  .ba-lightbox  {
    perspective: 1000px;
}

.custom-effect-8 {
    transform: rotateX(90deg) translateY(-22px);
    opacity: 0;
}

.visible-section .custom-effect-8,
.visible-lightbox .custom-effect-8 {
    transform: rotateX(0) translateY(0); 
    transform-origin: 50% 0;
    transform-style: preserve-3d;
    transition: transform 0.8s;  
    opacity: 1;
}

.custom-effect-8: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%;
}

Class Suffix: custom-effect-9

@keyframes effect-9 {
    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 .custom-effect-9,
.visible-lightbox .custom-effect-9 {
    animation: effect-9 0.7s ease-in-out both;
}

@keyframes effect-9 {
    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 .custom-effect-9 .ba-section-items,
.visible-lightbox .custom-effect-9 .ba-section-items {
    animation: effect-9 0.7s ease-in-out;
    animation-delay: 0.06s;
}

Flip Lightbox Effects

Class Suffix: custom-effect-10

@-webkit-keyframes effect-10 {
    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 .custom-effect-10,
.visible-lightbox .custom-effect-10 {
    animation: effect-10 1s  both;
}

Class Suffix: custom-effect-11

@keyframes custom-effect-11 {
    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 .custom-effect-11,
.visible-lightbox .custom-effect-11 {
    animation: custom-effect-11 2s linear;
}

Class Suffix: custom-effect-12

@keyframes effect-12 {
    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 .custom-effect-12,
.visible-lightbox .custom-effect-12 {
    animation: effect-12 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

Class Suffix: custom-effect-13

.visible-section > .ba-wrapper,
.visible-lightbox {
    perspective: 1300px;    
}

.custom-effect-13 {
    opacity: 0;
    transform: scale(0) rotate(720deg);
    transition: all 0.3s;
}

.visible-section .custom-effect-13,
.visible-lightbox .custom-effect-13 {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

Class Suffix: custom-effect-14

.visible-section > .ba-wrapper,
.visible-lightbox {
    perspective: 1300px;    
}

.custom-effect-14 {
    transform-style: preserve-3d;
    transform: rotateX(-70deg);
    transition: all 0.3s;
    opacity: 0;
}

.visible-section .custom-effect-14,
.visible-lightbox .custom-effect-14 {
    transform: rotateX(0deg);
    opacity: 1;
}

Slide Lightbox Effects

Class Suffix: custom-effect-15

@keyframes effect-15 {
    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 .custom-effect-15,
.visible-lightbox .custom-effect-15 {
    animation: effect-15 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

Class Suffix: custom-effect-16

@keyframes effect-16 {
    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 .custom-effect-16,
.visible-lightbox .custom-effect-16 {
    animation: effect-16 1s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

Class Suffix: custom-effect-17

.visible-section {
    perspective: 1300px;
}

.custom-effect-17,
.custom-effect-17 {
    transform-style: preserve-3d;
    transform: translateZ(100px) translateX(-30%) rotateY(90deg);
    transform-origin: 0 100%;
    opacity: 0;
    transition: all 0.3s;
}

.visible-section .custom-effect-17,
.visible-lightbox .custom-effect-17 {
    transform: translateZ(0px) translateX(0%) rotateY(0deg);
    opacity: 1;
}

Class Suffix: custom-effect-18

@keyframes custom-effect-18 {
    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 .custom-effect-18,
.visible-lightbox .custom-effect-18 {
    animation: custom-effect-18 1s linear !important;
}

Class Suffix: custom-effect-19

@keyframes custom-effect-19 {
    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 .custom-effect-19,
.visible-lightbox .custom-effect-19 {
    animation: custom-effect-19 1s linear !important;
}

Class Suffix: custom-effect-20

@keyframes effect-20 {
    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 .custom-effect-20,
.visible-lightbox .custom-effect-20 {
    animation: effect-20 1s  both;
}

Step 3: Save and Check.

Save changes. Clear your browser cache and look results.

---