Simple Ken Burns effect using CSS Keyframes Animation

byCodingFlicks -August 13, 2020

0

Ken Burns effect is an animation of any image by panning and zooming. It is achieved in web design with some simple CSS code. The fundamental idea of this Ken Burns effect was invented by a US-based documentarian named Ken Burns. Nowadays, Some web designers use this technique in their web design strategy. Using this Ken Burns photo effect, we will get an excellent pan and zoom effect of the image we will use as a homepage background.

Today we will create a Simple Ken Burns effect using CSS Keyframes Animation on a simple-looking homepage. Earlier we shared a blog post on Responsive Team Accordion using Bootstrap. We will use plain HTML and CSS to make the simple Ken Burns effects. To summarize we will use CSS Keyframes animation in this snippet.

Video Tutorial:

First, we will start with HTML markup. we have created a simple nav element with a div named logo and a primary menu with only five anchor tags. Then I will take another div element with "banner-img" class, where I place an image used to create our required ken burns effects. A place banner image will be dull, so I took another div element with a "banner-text" class and provided a header element, some text, and a call-to-action button just like we see on a typical homepage. That's it with the HTML markup for this project.

You may also like:

We are moving on to CSS code. First, we discarded the document's default padding and margin by giving the body a margin and padding of 0. We used Lato as a font family for the project. After that, we gave the Nav element a position fixed property and also gave it a z-index value of 1. We did this because we wanted the nav to be at the top of the banner. we have given a custom 1170px width to the nav element and tried to make it in the middle by giving it top and left values. Then we styled the logo text and placed that to the right by giving it a float left the property.

Then comes the menu, which we placed to the right by giving it float right value. Then we did some styling for the anchor tags inside the "menu" class. For the banner image, I provided a width of 100% and a height of 100vh to make the full width of the viewport. Then I have given it overflow hidden and relative position value as well. I set an animation for the image with the name "animate" and gave it a 40s animation duration and an animation timing function. I placed the banner text element slightly left of the homepage but gave it an absolute position, top, and left value. After that, I did some basic styling for all the elements inside the banner-text class. For the CSS keyframes animation, I set the CSS in a way so that at the beginning, the image will start scaling bigger for the bottom right origin, and at 100%, the image will finish transforming from scale 1 to 1.3.

Ken Burns effect using CSS Animation [ Source Code ]:

To create this web layout with Ken Burns effects, you can copy the following HTML and CSS code and paste it into your project files, and save them. You can also download the code from the download button below this blog post.

HTML:

  <!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Ken Burns effect using CSS Keyframes Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
		<div class="logo">Company logo</div>
		<div class="menu">
			<a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Portfolio</a>
            <a href="#">Services</a>
            <a href="#">Contact</a>
		</div>
	</nav>
	<div class="banner-img"><img src="2.jpg"></div>
	<div class="banner-text">
		<h2>Where luxury meets performance</h2>
		<p>Our latest generation of cars, trucks and SUVs comes loaded with upgrades that extend beyond the surface.</p>
        <a href="#">Contact Us</a>
	</div>
</body>
</html>

CSS:

  body {
	margin: 0;
	padding: 0;
	font-family: lato; 
}
nav {
	position: fixed;
	z-index: 1;
	left: 15%;
	top: 3%;
	width: 1170px;
}
.logo {
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 20px;
	float: left;
}
.menu {
	float: right;
}
.menu a {
	text-decoration: none;
	color: #fff;
	padding: 0 15px;
	font-size: 18px;
}
.banner-img {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
}
.banner-img img {
	width: 100%;
	animation: animate 15s ease alternate infinite;
	position: absolute;
}
.banner-text {
	position: absolute;
	top: 30%;
	left: 10%;
	width: 500px;
	height: 200px;
	background: rgba(0, 0, 0, 0.5);
	color: #ffffff;
	padding: 3%;
}
.banner-text h2 {
	text-transform: uppercase;
	font-size: 38px;
	margin: 10px 0;
}
.banner-text p {
	text-transform: uppercase;
	line-height: 28px;
}
.banner-text a {
	background: deepskyblue;
	text-decoration: none;
	color: #000;
	padding: 10px 15px;
	display: inline-block;
	margin-top: 15px;
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 50px;
}
@keyframes animate {
	0%,100% {
		transform-origin: bottom right;
		transform: scale(1.0);
	}
	100% {
		transform: scale(1.1);
	}
}

CSS animation not only makes the elements of the website attractive but also increases the acceptance of the website to the users. You can use this Ken Burns CSS Animation on the homepage of your website. We hope you liked this snippet. Please feel free to leave a comment down below. Thanks for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.