Pure CSS Slideshow With Ken Burns Effect

Preview:

Description:

This is a CSS/CSS3 only slideshow which transitions between images (and any other web content) with ken burns, slide, fade and focus effects.

How to use it:

Create the html for 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>

The basic CSS styles for the slideshow.

.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;
}

Add your own background images to the slides.

.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;
}

Add animations to the 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;
}

Create the CSS3 powered animations.

/**
 * ----------------------------------------
 * 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);
}
}