Filter animation

by kmouse

HTML

<div class="filter">
Testing
</div>

CSS

@keyframes mixed {
	from { filter: drop-shadow(#f00 30px 20px 5px) opacity(0.2) blur(15px) grayscale(0.5); }
	to   { filter: drop-shadow(#000 30px 20px 5px) opacity(1.0); }
}


.filter {
	animation: mixed 2s infinite alternate;
	
	background: #f00;
	border-radius: 15px;
	width: 300px;
	height: 200px;
	position: absolute;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	padding: 3em;
}