Full width image with pure css Ken Burns effect
A Pen by Saijo George on CodePen.
<div class="image-wrap"> | |
<img src="https://unsplash.it/900/700"> | |
</div> |
Full width image with pure css Ken Burns effect
A Pen by Saijo George on CodePen.
.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 */ | |
} | |
} |