DlVl CSS KEN BURN EFFECT

Css ni buat slider atau image bergerak. untuk DlVl. Header atau slider.

ref : https://www.elegantthemes.com/blog/divi-resources/ken-burns-effect-divi



.kb-zoomout .et_pb_slide .et_parallax_bg {
   animation: zoomout 7s forwards;
  -ms-animation: zoomout 7s forwards;
  -webkit-animation: zoomout 7s forwards;
  -0-animation: zoomout 7s forwards;
  -moz-animation: zoomout 7s forwards;

}

.kb-zoomin .et_pb_slide .et_parallax_bg {
   animation: zoomin 7s forwards;
  -ms-animation: zoomin 7s forwards;
  -webkit-animation: zoomin 7s forwards;
  -0-animation: zoomin 7s forwards;
  -moz-animation: zoomin 7s forwards;

}

.kb-zoomin-right .et_pb_slide .et_parallax_bg {
   animation: zoomin-right 7s forwards;
  -ms-animation: zoomin-right 7s forwards;
  -webkit-animation: zoomin-right 7s forwards;
  -0-animation: zoomin-right 7s forwards;
  -moz-animation: zoomin-right 7s forwards;

}

.kb-zoomout-right .et_pb_slide .et_parallax_bg {
   animation: zoomout-right 7s forwards;
  -ms-animation: zoomout-right 7s forwards;
  -webkit-animation: zoomout-right 7s forwards;
  -0-animation: zoomout-right 7s forwards;
  -moz-animation: zoomout-right 7s forwards;

}

.kb-zoomout .et_parallax_bg {
   animation: zoomout 17s forwards;
  -ms-animation: zoomout 17s forwards;
  -webkit-animation: zoomout 17s forwards;
  -0-animation: zoomout 17s forwards;
  -moz-animation: zoomout 17s forwards;

}

.kb-zoomin .et_parallax_bg {
   animation: zoomin 17s forwards;
  -ms-animation: zoomin 17s forwards;
  -webkit-animation: zoomin 17s forwards;
  -0-animation: zoomin 17s forwards;
  -moz-animation: zoomin 17s forwards;

}

.kb-zoomin-right .et_parallax_bg {
   animation: zoomin-right 7s forwards;
  -ms-animation: zoomin-right 17s forwards;
  -webkit-animation: zoomin-right 17s forwards;
  -0-animation: zoomin-right 17s forwards;
  -moz-animation: zoomin-right 17s forwards;

}

.kb-zoomout-right .et_parallax_bg {
   animation: zoomout-right 7s forwards;
  -ms-animation: zoomout-right 17s forwards;
  -webkit-animation: zoomout-right 17s forwards;
  -0-animation: zoomout-right 17s forwards;
  -moz-animation: zoomout-right 17s forwards;

}



@keyframes zoomout{
0% {
    -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
    -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    animation-timing-function: linear;
}


100% {
    -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);

}
}

@keyframes zoomin{
0%{
    -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    animation-timing-function: linear;


}


100%{
    -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
    -webkit-transform: scale3d(3.5, 3.5, 3.5) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);

}
}

@keyframes zoomout-right{
0%{
    -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    animation-timing-function: linear;
}


100%{
    -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);

}
}

@keyframes zoomin-right{
0%{
    -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    animation-timing-function: linear;
}
   

100%{
    -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);

}
}