Ken Burns top left to bottom right

index.html

<figure><!-- Use a background image and transition the background-position --></figure>

ken-burns-top-left-to-bottom-right.markdown

Ken Burns top left to bottom right

Ken Burns image effect in pure css to scroll from the top left of an image to the bottom right.

Also, a nice mask animation on hover.

A Pen by Saijo George on CodePen.

License.

style.sass

@import compass

$imagewidth: 1200px
$imageheight: 700px
$maskwidth: 800px
$maskheight: 430px
figure
  width: 100%
  max-width: $maskwidth
  height: $maskheight
  margin: 2em auto
  overflow: hidden
  background: url("http://unsplash.it/1900/1800")
  animation-name: ken-burns
  animation-duration: 30s
  animation-iteration-count: infinite
  animation-timing-function: ease
  animation-fill-mode: forwards
  animation-delay: 0s
  +transition(1s ease all)
  &:hover
    $maskwidth: 700px
    max-width: $maskwidth
    +box-shadow(0 0 10px 0 rgba(0,0,0,.3))
  
@keyframes ken-burns
  0%
    background-position: 0 0
  50%
    background-position: -($imagewidth - $maskwidth) -($imageheight - $maskheight)  
    background-position: -880px -508px
  100%
    background-position: 0 0