Sources:

• https://www.facebook.com/groups/diviwebdesigners/posts/1497810673922631/
• https://www.tutorialstonight.com/css/css-3D-transformation.php
• https://www.kirupa.com/html5/ken_burns_effect_css.htm

The Ken Burns’s effect is a panning and zooming animation of an image.

• Add the following css to the Divi theme options. This css zooms out, to zoom in, revert the transform scale setting from 1 to 1.25.
• Add the class to an image module (or column or whatever you want to zoom).
• Set overflow:hidden; to the structure above (like column, row, section)

Then use either one of the following two pieces of CSS

Zoom and pan

• Scale3d: different scaling on the x, y and z-axis.
• Translate3d: moving the object along the x, y and z-axis
• Rotate3d: rotating along the x, y and z-axis
• X-axis: horizontal (left — right)
• Y-axis: vertical (top — bottom)
• Z-axis: depth (front — back)

/* START Ken Burns effect, zoom and pan */
.hws-kenburns {
animation: kenburns 5s linear forwards;
}
@keyframes kenburns {
0% {transform: scale3d(1,1,1) translate3d(-15px,0,0);}
100% {transform: scale3d(1.25, 1.25, 1.25) translate3d(-55px, -55px, 0);}
}
/* END Ken Burns effect, zoom and pan */Code language: CSS (css)

Zoom only

• Animation: duration name timing forward infinite
• Scale: equal scaling on all sides
• Or use scale3d which is more performant as it relies on your graphic card

/* START Simpel Ken Burns effect, zoom only */
.hws-kenburns{
animation: 5s kenburns linear forwards infinite;
}
@keyframes kenburns {
0%{transform: scale(1.25);}
50%{transform: scale(1);}
100%{transform: scale(1.25);}
}
/* END Simpel Ken Burns effect, zoom only */Code language: CSS (css)

Simpel (Deli Megusto)

Used to zoom-in a background image of the first column of a specialty section, so the class hws-zoom was added to Column 1 CSS Class on the advanced tab of the speciality section.

.hws-kenburns{
animation: 5s custom-zoom linear forwards;
}
@keyframes custom-zoom{
0%{transform: scale(1.25);}
100%{transform: scale(1);}
}Code language: CSS (css)