Ken Burns effect CSS only

index.pug

#CrossFade
  each img in [1043,1039,1017,929] 
    img(src='//unsplash.it/1600/900?image='+img, alt="img")
  .intro
    h1 Lorem ipsum dolor sit amet
    p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis impedit facilis nesciunt quam vitae voluptatibus ullam vero.

ken-burns-effect-css-only.markdown

Ken Burns effect CSS only

Ken Burns effect CSS only

A Pen by Dima on CodePen.

License.

style.stylus

*
  margin 0
  padding 0
  box-sizing border-box
  

:root
  font-size calc(.5vw + 1vh + .5vmin)
body
  font 100 50%/1.5 'Roboto', sans-serif
  
.intro
  position relative
  margin 2em
  padding .2em .6em
  cursor pointer
  // &:hover
  //   background rgba(96, 125, 139, 0.5);

  
  color #FFF
  font-size 2em
  max-width 26em
  h1
    margin-bottom .5em
    line-height 1
    font-weight 100
  
//===== #CrossFade =======

#CrossFade
  background #FFF //no flash
  
  display flex
  align-items flex-end
  
  height 100vh
  overflow hidden
  position relative
  
  img
    position absolute
    min-width 100%
    min-height 100%
    height auto
    background #000
    
    
    backface-visibility hidden
    opacity 0    
    transform scale(1.4) rotate(12deg)

    animation CrossFade 24s infinite
    &:nth-child(3)
      animation-delay 6s
    &:nth-child(2)
      animation-delay 12s
    &:nth-child(1)
      animation-delay 18s
    
@keyframes CrossFade
  25%
    opacity 1
    transform scale(1) rotate(0)
  40%
    opacity 0   
  
    
 
//===== #CrossFadeMixin =======
/* 

$duration = 12
$slides = 4
$step = $duration/$slides
setDelayRevers($duration, $slides)
  
  for index in (2..$slides)
    &:nth-child({index -1}) 
      animation-delay ($step*index)s

#CrossFade
  height 100vh
  overflow hidden
  position relative
  
  display flex
  img
    align-self center
    position absolute
    
    min-width 100%
    min-height 100%
    height auto
    
    backface-visibility hidden
    opacity 0
  
    transform scale(1.4) rotate(12deg)
    animation CrossFade ($duration)s infinite 
    setDelayRevers($duration, $slides)   
@keyframes CrossFade
  25%
    opacity 1
    transform scale(1) rotate(0)
  40%
    opacity 0
    
*/