Is is possible the scale the background image during show, aka Ken Burns Effect?

[DannyMurphy]

It is possible to add a scale animation to the slide's background image during the duration of the slide visible (not zoom in/zoom out). This would provide a Ken Burns style effect.

Thank you in advance, Danny

[femioladeji]

Nice suggestion @DannyMurphy. I'll check this out and give it a try or if you have some time you can actually raise a PR for it

[DannyMurphy]

Thanks @femioladeji I did quick CSS animation to get me what I need.

CSS

[aria-hidden="false"] .each-slide-effect > div {
  //make the animation last the same length as the slide duration + transitionDuration.
  -webkit-animation: zoomin 7s linear;
  animation: zoomin 7s linear;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}

@keyframes zoomin {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(2);
    transform: scale(1.2);
  }
} 

Element

const images = [
        "https://images.unsplash.com/photo-1509721434272-b79147e0e708?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80",
        "https://images.unsplash.com/photo-1506710507565-203b9f24669b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1536&q=80",
        "https://images.unsplash.com/photo-1536987333706-fc9adfb10d91?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80",
    ];

    return (
      <Fade
        duration="5000"
        transitionDuration="2000"
        arrows={false}
        pauseOnHover={false}
        canSwipe={false}
      >
            <div className="each-slide-effect">
                <div style={{ 'backgroundImage': `url(${images[0]})` }}>
                    <span>Slide 1</span>
                </div>
            </div>
            <div className="each-slide-effect">
                <div style={{ 'backgroundImage': `url(${images[1]})` }}>
                    <span>Slide 2</span>
                </div>
            </div>
            <div className="each-slide-effect">
                <div style={{ 'backgroundImage': `url(${images[2]})` }}>
                    <span>Slide 3</span>
                </div>
            </div>
        </Fade>
    );