Fullscreen Bootstrap 4 carousel Ken Burns and fade

My goal is to create a zoom in "Ken Burns" effect and a crossfade transition between slides using Bootstrap 4 carousel. The zooming effect should take 6 seconds and the fading transition 1 second. Also the carousel should loop without being noticed when the transition is made from last and first slide.

The zoom effect works pretty good but it has a "jump" in my demo and the fading transition is not working properly and. I would appreciate help with it. Thanks!

Demo

http://jsfiddle.net/beuL5dcp/

HTML

<div class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000">

    <!--======= Wrapper for Slides =======-->
    <div class="carousel-inner">

            <!--========= First Slide =========-->
            <div class="carousel-item active" style="background-image: url('https://i.picsum.photos/id/878/1920/1680.jpg?hmac=_FQShv6E5HdjI6OKgjozFJQz8SXlT1OwmqijW5jHGQo')">
            </div>

            <!--========= Second Slide =========-->
            <div class="carousel-item" style="background-image: url('https://i.picsum.photos/id/874/1920/1680.jpg?hmac=KDczwg-ejraLUmoflMNUBCkt1LyLxNreJptc7RQajFY')">
            </div>

            <!--========= Third Slide =========-->
            <div class="carousel-item" style="background-image: url('https://i.picsum.photos/id/870/1920/1680.jpg?hmac=IAkVJX2zYS6BuaMLixYh5xoyOpeDH5WkcGTacBUPPXM')">
            </div>

     </div>

 </div>

CSS

.carousel-inner>.carousel-item
{
  margin:auto;
  height: 100vh;
  width:100%;
  -webkit-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
  -ms-transform-origin:50% 50%;
  -o-transform-origin:50% 50%;
  transform-origin:50% 50%;
  -webkit-animation:kenburns 6000ms linear 0s infinite;
  animation:kenburns 6000ms linear 0s infinite
}
@-webkit-keyframes kenburns
{
  0%
  {
    -webkit-transform:scale(1);
    -webkit-transition:-webkit-transform 6000ms linear 0s
  }
  100%
  {
    -webkit-transform:scale(1.1);
    -webkit-transition:-webkit-transform 6000ms linear 0s
  }

}
@-moz-keyframes kenburns
{
  0%
  {
    -moz-transform:scale(1);
    -moz-transition:-moz-transform 6000ms linear 0s
  }
  100%
  {
    -moz-transform:scale(1.1);
    -moz-transition:-moz-transform 7000ms linear 0s
  }

}
@-ms-keyframes kenburns
{
  0%
  {
    -ms-transform:scale(1);
    -ms-transition:-ms-transform 6000ms linear 0s
  }
  100%
  {
    -ms-transform:scale(1.1);
    -ms-transition:-ms-transform 6000ms linear 0s
  }

}
@-o-keyframes kenburns
{
  0%
  {
    -o-transform:scale(1);
    -o-transition:-o-transform 6000ms linear 0s
  }
  100%
  {
    -o-transform:scale(1.1);
    -o-transition:-o-transform 6000ms linear 0s
  }

}
@keyframes kenburns
{
  0%
  {
    transform:scale(1);
    transition:transform 6000ms linear 0s
  }
  100%
  {
    transform:scale(1.1);
    transition:transform 6000ms linear 0s
  }

}

from Fullscreen Bootstrap 4 carousel Ken Burns and fade