Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ken Burns effect - pure css
<div class="image-wrap">
<img src="https://unsplash.it/900/700">
</div>
.image-wrap {
width: 100%;
height: 50vw;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.image-wrap img {
width: 100%;
animation: move 40s ease;
/* Add infinite to loop. */
-ms-animation: move 40s ease;
-webkit-animation: move 40s ease;
-0-animation: move 40s ease;
-moz-animation: move 40s ease;
position: absolute;
}
@-webkit-keyframes move {
0% {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
transform: scale(1.0);
-ms-transform: scale(1.0);
/* IE 9 */
-webkit-transform: scale(1.0);
/* Safari and Chrome */
-o-transform: scale(1.0);
/* Opera */
-moz-transform: scale(1.0);
/* Firefox */
}
100% {
transform: scale(1.2);
-ms-transform: scale(1.2);
/* IE 9 */
-webkit-transform: scale(1.2);
/* Safari and Chrome */
-o-transform: scale(1.2);
/* Opera */
-moz-transform: scale(1.2);
/* Firefox */
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment