Search Knowledge Base Articles

How to Add the Ken Burns effect in Elementor

.elementor-section {
width: 100%;
height: 50vw;
margin: 0 auto;
overflow: hidden;
position: relative;
}

.elementor-section img {
width: 100%;
animation: move 40s ease;
/* Add infinite to loop. */

-ms-animation: move 40s ease;
-webkit-animation: move 40s ease;
-0-animation: move 40s ease;
-moz-animation: move 40s ease;
position: absolute;
}

@-webkit-keyframes move {
0% {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
transform: scale(1.0);
-ms-transform: scale(1.0);
/* IE 9 */

-webkit-transform: scale(1.0);
/* Safari and Chrome */

-o-transform: scale(1.0);
/* Opera */

-moz-transform: scale(1.0);
/* Firefox */
}
100% {
transform: scale(1.2);
-ms-transform: scale(1.2);
/* IE 9 */

-webkit-transform: scale(1.2);
/* Safari and Chrome */

-o-transform: scale(1.2);
/* Opera */

-moz-transform: scale(1.2);
/* Firefox */
}
}

Did you find this article useful?


Related Articles