Pure CSS Background Slideshow Ken Burns Effect

CSS Gallery is only the CSS/CSS3 slideshow transmitted between the images (and any other web content) with the effects of Ken Burns, Slide and Fade, and Focus effects.

ken burns effect css background image, javascript ken burns effect, ken burns effect codepen, ken burns effect slideshow, ken burns effect on hover, ken burns effect background

How to make use of it:

1. Create HTML to display the slideshow.

<div class="main-container">
  <div class="img img-1"></div>
  <div class="img img-2"></div>
  <div class="img img-3"></div>
  <div class="img img-4"></div>
  <div class="img img-5"></div>
  <div class="title title-1">Slide 1</div>
  <div class="title title-2">Slide 2</div>
  <div class="title title-3">Slide 3</div>
  <div class="title title-4">Slide 4</div>
  <div class="title title-5">Slide 5</div>
</div>

2. The basic CSS patterns to display slides.

.main-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: black;
  overflow: hidden;
  z-index: 1;
  perspective: 400px;
  transition: opacity .3s;
}
.img {
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
}
.title {
  display: block;
  position: absolute;
  width: 200%;
  top: 50%;
  left: -50%;
  transform: translateY(-50%);
  font-size: 6em;
  text-align: center;
  color: #FFF;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: 0;
  z-index: 5;
}

3. Add your background images to the slices.

.main-container.loaded .img-1 {
  background-image: url(1.jpg);
  animation: kenburns-top 6s linear both reverse 0.5s, fade-out 2s ease-in forwards 5.5s;
  z-index: 5;
}
.main-container.loaded .img-2 {
  background-image: url(2.jpg);
  animation: kenburns-bottom 6s linear both 5.5s, fade-out 2s ease-in forwards 10.5s;
  z-index: 4;
}
.main-container.loaded .img-3 {
  background-image: url(3.jpg);
  animation: kenburns-right 6s linear both reverse 10.5s, fade-out 2s ease-in forwards 15.5s;
  z-index: 3;
}
.main-container.loaded .img-4 {
  background-image: url(4.jpg);
  animation: kenburns-left 6s linear both 15.5s, fade-out 2s ease-in forwards 20.5s;
  z-index: 2;
}
.main-container.loaded .img-5 {
  background-image: url(5.jpg);
  animation: kenburns-right 7s linear both reverse 20.5s, fade-out 3s ease-in forwards 24.5s;
  z-index: 1;
}

4. Add animation to titles.

.main-container.loaded .title-1 { animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 1.8s, text-blur-out 1.2s ease-in forwards 5.5s; }
.main-container.loaded .title-2 { animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 6.8s, text-blur-out 1.2s ease-in forwards 10.5s; }
.main-container.loaded .title-3 { animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 11.8s, text-blur-out 1.2s ease-in forwards 15.5s; }
.main-container.loaded .title-4 { animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 16.8s, text-blur-out 1.2s ease-in forwards 20.5s; }
.main-container.loaded .title-5 { animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 21.8s, text-blur-out 1.6s ease-in forwards 25.5s; }
.main-container.loaded .info-container {
  opacity: 0;
  animation: slide-in-bottom 12s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 26.5s;
}

5. Create CSS3-powered animation.

/**
 * ----------------------------------------
 * animation kenburns-top
 * ----------------------------------------
 */
@keyframes 
kenburns-top {  0% {
 transform: scale(1) translateY(0);
 transform-origin: 50% 16%;
}
 100% {
 transform: scale(1.25) translateY(-15px);
 transform-origin: top;
}
}
/**
 * ----------------------------------------
 * animation kenburns-bottom
 * ----------------------------------------
 */
@keyframes 
kenburns-bottom {  0% {
 transform: scale(1) translateY(0);
 transform-origin: 50% 84%;
}
 100% {
 transform: scale(1.25) translateY(15px);
 transform-origin: bottom;
}
}
/**
 * ----------------------------------------
 * animation kenburns-right
 * ----------------------------------------
 */
@keyframes 
kenburns-right {  0% {
 transform: scale(1) translate(0, 0);
 transform-origin: 84% 50%;
}
 100% {
 transform: scale(1.25) translateX(20px);
 transform-origin: right;
}
}
/**
 * ----------------------------------------
 * animation kenburns-left
 * ----------------------------------------
 */
@keyframes 
kenburns-left {  0% {
 transform: scale(1) translate(0, 0);
 transform-origin: 16% 50%;
}
 100% {
 transform: scale(1.25) translate(-20px, 15px);
 transform-origin: left;
}
}
/**
 * ----------------------------------------
 * animation focus-in-contract
 * ----------------------------------------
 */
@keyframes 
focus-in-contract {  0% {
 letter-spacing: 1em;
 filter: blur(12px);
 opacity: 0;
}
 100% {
 filter: blur(0px);
 opacity: 1;
}
}
/**
 * ----------------------------------------
 * animation tracking-in-contract
 * ----------------------------------------
 */
@keyframes 
tracking-in-contract {  0% {
 letter-spacing: 1em;
 opacity: 0;
}
 40% {
 opacity: 0.6;
}
 100% {
 letter-spacing: normal;
 opacity: 1;
}
}
/**
 * ----------------------------------------
 * animation fade-out
 * ----------------------------------------
 */
@keyframes 
fade-out {  0% {
 opacity: 1;
}
 100% {
 opacity: 0;
}
}
/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@keyframes 
fade-in {  0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
/**
 * ----------------------------------------
 * animation text-blur-out
 * ----------------------------------------
 */
@keyframes 
text-blur-out {  0% {
 filter: blur(0.01);
}
 100% {
 filter: blur(12px) opacity(0%);
}
}
/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@keyframes 
slide-in-bottom {  0% {
 transform: translateY(100%);
 opacity: 0;
}
 100% {
 transform: translateY(0);
 opacity: 1;
}
}
/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@keyframes 
rotate-center {  0% {
 transform: rotate(0);
}
 100% {
 transform: rotate(360deg);
}
}

css slideshow with ken burns effect, CSS Gallery Plugin/Codepen, pure css background slideshow ken burns effect