Hola podrías agregar a tu css este código(sirve para el efecto).
.flip-scale-2-ver-right {
-webkit-animation: flip-scale-2-ver-right 0.5s linear both;
animation: flip-scale-2-ver-right 0.5s linear both;
}
@-webkit-keyframes flip-scale-2-ver-right {
0% {
-webkit-transform: translateX(0) rotateY(0) scale(1);
transform: translateX(0) rotateY(0) scale(1);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
50% {
-webkit-transform: translateX(50%) rotateY(-90deg) scale(2);
transform: translateX(50%) rotateY(-90deg) scale(2);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
100% {
-webkit-transform: translateX(100%) rotateY(-180deg) scale(1);
transform: translateX(100%) rotateY(-180deg) scale(1);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
}
@keyframes flip-scale-2-ver-right {
0% {
-webkit-transform: translateX(0) rotateY(0) scale(1);
transform: translateX(0) rotateY(0) scale(1);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
50% {
-webkit-transform: translateX(50%) rotateY(-90deg) scale(2);
transform: translateX(50%) rotateY(-90deg) scale(2);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
100% {
-webkit-transform: translateX(100%) rotateY(-180deg) scale(1);
transform: translateX(100%) rotateY(-180deg) scale(1);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
}
Y luego en tu JS deberia aplicarle la clase css de esta manera. O intenta en otro lugar de tu js, pero la idea es agregarle la clase .flip-scale-2-ver-right. Como sigue
$('.home_banner_area .box_1620').addClass('flip-scale-2-ver-right');
$('.home_banner_area .box_1620').css({
"background": 'url("'+data[contador].img_slider+',"',
'background-size': 'cover',
'min-height': '650px',
'border-radius': '12px',
'position': 'relative',
'bottom': '-120px'
})