ken-burns-slideshow/src/style.tmpl.css

A slideshow in JS with the Ken Burns effect

html {
  padding: 0;
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
  height: 100%;
}

.{{prefix}} {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.{{prefix}}__slide {
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  overflow: hidden;
}

.{{prefix}}__slide-img {
  height: 100%;
  opacity: 0;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-duration: 3s, {{transitionDelay}}ms;
}

.{{prefix}}--has-kenBurnsFx {
  opacity: 1;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}