WARNING !!

YOUR LAYOUT IS INCOMPLETE!

ADD THE FOLLOWING CODE TO YOUR PAGE / SITE TO COMPLETE IT NOW!

↓

Custom CSS > ADD THIS TO COMPLETE THE LAYOUT! ↓

.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);
}
}

HOW TO ADD IT

YOU CAN DELETE THIS SECTION AFTER YOU DO THAT 🙂

Ken Burns Title Effect

Ken Burns Subheading Effect

EFFECT ALSO AVAILABLE FOR SLIDERS

AVAILABLE EFFECTS:
kb-zoomin – zooms in on the image
kb-zoomout – zooms out from the image
kb-zoomin-right – zooms in and pans right on the image
kb-zoomout-right – zooms out and pans right on the image

How to Create and Use the “Ken Burns Effect” within Divi