Skip to content

Instantly share code, notes, and snippets.

Created January 30, 2017 01:08
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Ken Burns top left to bottom right
<figure><!-- Use a background image and transition the background-position --></figure>

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.


@import compass
$imagewidth: 1200px
$imageheight: 700px
$maskwidth: 800px
$maskheight: 430px
width: 100%
max-width: $maskwidth
height: $maskheight
margin: 2em auto
overflow: hidden
background: url("")
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)
$maskwidth: 700px
max-width: $maskwidth
+box-shadow(0 0 10px 0 rgba(0,0,0,.3))
@keyframes ken-burns
background-position: 0 0
background-position: -($imagewidth - $maskwidth) -($imageheight - $maskheight)
background-position: -880px -508px
background-position: 0 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment