image effects
Posted in
4950
3:01 am, September 20, 2021
Ken Burns effect - pure css
a ken burns image effect with slow zoom in animations, you kind of look at this one and go, is that image actually moving, and yes, yes it is...
Ken Burns effect - pure css Demo
View Demo Full Screen View Demo New Tab
Ken Burns effect - pure css Code
HTML
<div class="image-wrap">
<img src="https://unsplash.it/900/700">
</div>
CSS
.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 */
}
}
External Link for Ken Burns effect - pure css
Add Comment
Other Items in image effects
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript