Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html

Created Jan 30, 2017
Embed
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.

License.

@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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.