Animate Skew of Image

Continuously animate the skewing of an image without distorting it.

by Jon Fuller

HTML

<div class="featured-image">
	<img src="https://www.mirabito.com/wp-content/uploads/2015/12/multiple-large-tanks.jpg">
</div>

CSS

body {
	margin: 0;
}
img {
	height: auto;
	max-width: 100%;
}
/* the stuff you need is here */
.featured-image {
	position: relative;
	max-width: 420px;
	margin: 0 auto;
}
.featured-image img {
	-webkit-clip-path: polygon(11% 0%, 100% 0%, 89% 100%, 0% 100%);
	clip-path: polygon(11% 0%, 100% 0%, 89% 100%, 0% 100%);
	animation: featured-img 10s infinite;
}
.featured-image::before {
	content: '';
	position: absolute;
	top: 20px;
	right: 0;
	bottom: 20px;
	left: 0;
	display: block;
	background-color: #008349;
	-ms-transform: skew(-15deg) translateX(0px);
	-webkit-transform: skew(-15deg) translateX(0px);
	-moz-transform: skew(-15deg) translateX(0px);
	transform: skew(-15deg) translateX(0px);
	z-index: -1;
	animation: featured-bg 15s infinite;
}
@keyframes featured-img {
	0% {
		-webkit-clip-path: polygon(11% 0%, 100% 0%, 89% 100%, 0% 100%);
		clip-path: polygon(11% 0%, 100% 0%, 89% 100%, 0% 100%);
	}
	50% {
		-webkit-clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
		clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
	}
	100% {
		-webkit-clip-path: polygon(11% 0%, 100% 0%, 89% 100%, 0% 100%);
		clip-path: polygon(11% 0%, 100% 0%, 89% 100%, 0% 100%);
	}
}
@keyframes featured-bg {
	0% {
		-ms-transform: skew(-15deg) translateX(0px);
		-webkit-transform: skew(-15deg) translateX(0px);
		-moz-transform: skew(-15deg) translateX(0px);
		transform: skew(-15deg) translateX(0px);
	}
	50% {

		-ms-transform: skew(-10deg) translateX(10px);
		-webkit-transform: skew(-10deg) translateX(10px);
		-moz-transform: skew(-10deg) translateX(10px);
		transform: skew(-10deg) translateX(10px);
	}
	100% {
		-ms-transform: skew(-15deg) translateX(0px);
		-webkit-transform: skew(-15deg) translateX(0px);
		-moz-transform: skew(-15deg) translateX(0px);
		transform: skew(-15deg) translateX(0px);
	}
}