Guide on adding Ken Burns effect to Flatsome Slider Theme.

This content provides a step-by-step guide on how to create a slider effect using CSS animation. The instructions include setting the class name for the slider, inserting specific CSS code for the animation, and defining keyframes for the movement. The result is a slider with a moving background and rotating dots. By following these steps, users can enhance the visual appeal of their sliders on webpages. The content has received high ratings from users, indicating its effectiveness in creating dynamic and engaging slider effects using CSS.

Step 1: Set the class name for Slider as slide (Intended to only affect this Slider)

Step 2: Insert the following css into the theme

.exslider .flickity-slider .is-selected .bg {
  width: 100%;
  animation: move 20s ease;
  /* Add infinite to loop. */
  -ms-animation: move 20s ease;
  -webkit-animation: move 20s ease;
  -0-animation: move 20s ease;
  -moz-animation: move 20s 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 */
  }
}
.exslider .flickity-page-dots .dot {
    transform: rotate(45deg);
}

And this is the result: