Active and focus animations in css

 Techmates   18 Sep, 2018  5 mins read   94


In this post we'd love to share active and focus class animations using CSS and JS using perspactive property.


HTML Structure

 <div class="boxes skew" dd-boxes>
	<span class="right">To Right</span>
	<span class="left">To Left</span>
	<span class="right">To Right</span>
	<span class="left">To Left</span>
</div>
<div class="boxes perspective" dd-boxes>
	<span class="left">Perspactive Left</span>
	<span class="right">Perspactive Right</span>
	<span class="top">Perspactive Top</span>
	<span class="bottom">Perspactive Bottom</span>
</div>
<div class="boxes perspective" dd-boxes>
	<span class="left big">Perspactive Large Left</span>
	<span class="right big">Perspactive Large Right</span>
	<span class="top big">Perspactive Large Top</span>
	<span class="bottom">Perspactive Large Bottom</span>
</div>
<div class="boxes perspective" dd-boxes>
	<span class="per-ryy">Perspactive-RotateY</span>
	<span class="per-rxx">Perspactive-RotateX</span>
</div>
<div class="boxes zoom" dd-boxes>
	<span class="out">Zoom Out</span>
	<span class="in">Zoom In</span>
	<span class="in-out">Zoom In Out</span>
	<span class="out-in">Zoom Out In</span>
</div>

CSS Styles

 @import url('https://fonts.googleapis.com/css?family=Nunito:200,300,400,700,900');
:root {
	--font-family: "Nunito", sans-serif;
	--transition: all .3s ease-out;
	--clr-green: #77b794;
	--clr-gray: #6c6c6c;
}
.dd-title {
	font-family: var(--font-family);
}
.boxes {
	position: relative;
	margin: 50px 0;
}
.boxes span {
	position: relative;
	font-family: var(--font-family);
	font-weight: 900;
	color: var(--clr-gray);
	cursor: pointer;
	display: inline-block;
	padding: 15px 50px;
	font-weight: 700;
	z-index: 1;
}
.boxes span.active {
	color: #fff;
}
.boxes span::after {
	position: absolute;
	content: ' ';
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 4px;
	visibility: hidden;
	z-index: -1;
	-webkit-transition: var(--transition);
	   -moz-transition: var(--transition);
	    -ms-transition: var(--transition);
	     -o-transition: var(--transition);
	        transition: var(--transition);
}
.boxes span.active::after {
	visibility: visible;
	background: var(--clr-green);
}

/* Skew animation */
.boxes.skew span.right::after {
	-webkit-transform: rotate(0deg) scale(.9);
	   -moz-transform: rotate(0deg) scale(.9);
	    -ms-transform: rotate(0deg) scale(.9);
	     -o-transform: rotate(0deg) scale(.9);
	        transform: rotate(0deg) scale(.9);
}
.boxes.skew span.right.active::after {
	-webkit-transform: rotate(4deg) scale(1);
	   -moz-transform: rotate(4deg) scale(1);
	    -ms-transform: rotate(4deg) scale(1);
	     -o-transform: rotate(4deg) scale(1);
	        transform: rotate(4deg) scale(1);
}
.boxes.skew span.left::after {
	-webkit-transform: rotate(0deg) scale(.9);
	   -moz-transform: rotate(0deg) scale(.9);
	    -ms-transform: rotate(0deg) scale(.9);
	     -o-transform: rotate(0deg) scale(.9);
	        transform: rotate(0deg) scale(.9);
}
.boxes.skew span.left.active::after {
	-webkit-transform: rotate(-4deg) scale(1);
	   -moz-transform: rotate(-4deg) scale(1);
	    -ms-transform: rotate(-4deg) scale(1);
	     -o-transform: rotate(-4deg) scale(1);
	        transform: rotate(-4deg) scale(1);
}

/* Perspective */
.boxes.perspective span.left::after {
	transform-origin: left;
	-webkit-transform: perspective(300px) rotateY(90deg) scale(.9);
	   -moz-transform: perspective(300px) rotateY(90deg) scale(.9);
	    -ms-transform: perspective(300px) rotateY(90deg) scale(.9);
	     -o-transform: perspective(300px) rotateY(90deg) scale(.9);
	        transform: perspective(300px) rotateY(90deg) scale(.9);
}
.boxes.perspective span.left.big::after {
	transform-origin: left;
	-webkit-transform: perspective(300px) rotateY(-90deg) scale(.9);
	   -moz-transform: perspective(300px) rotateY(-90deg) scale(.9);
	    -ms-transform: perspective(300px) rotateY(-90deg) scale(.9);
	     -o-transform: perspective(300px) rotateY(-90deg) scale(.9);
	        transform: perspective(300px) rotateY(-90deg) scale(.9);
}
.boxes.perspective span.right::after {
	transform-origin: right;
	-webkit-transform: perspective(300px) rotateY(-90deg) scale(.9);
	   -moz-transform: perspective(300px) rotateY(-90deg) scale(.9);
	    -ms-transform: perspective(300px) rotateY(-90deg) scale(.9);
	     -o-transform: perspective(300px) rotateY(-90deg) scale(.9);
	        transform: perspective(300px) rotateY(-90deg) scale(.9);
}
.boxes.perspective span.right.big::after {
	transform-origin: right;
	-webkit-transform: perspective(300px) rotateY(90deg) scale(.9);
	   -moz-transform: perspective(300px) rotateY(90deg) scale(.9);
	    -ms-transform: perspective(300px) rotateY(90deg) scale(.9);
	     -o-transform: perspective(300px) rotateY(90deg) scale(.9);
	        transform: perspective(300px) rotateY(90deg) scale(.9);
}
.boxes.perspective span.left.active::after, .boxes.perspective span.right.active::after, .boxes.perspective span.left.big.active::after {
	-webkit-transform: perspective(0) rotateY(0deg) scale(1);
	   -moz-transform: perspective(0) rotateY(0deg) scale(1);
	    -ms-transform: perspective(0) rotateY(0deg) scale(1);
	     -o-transform: perspective(0) rotateY(0deg) scale(1);
	        transform: perspective(0) rotateY(0deg) scale(1);
	margin-left: 0;
}

.boxes.perspective span.top::after {
	transform-origin: top;
	-webkit-transform: perspective(250px) rotateX(-65deg) scale(.9);
	   -moz-transform: perspective(250px) rotateX(-65deg) scale(.9);
	    -ms-transform: perspective(250px) rotateX(-65deg) scale(.9);
	     -o-transform: perspective(250px) rotateX(-65deg) scale(.9);
	        transform: perspective(250px) rotateX(-65deg) scale(.9);
}
.boxes.perspective span.top.big::after {
	transform-origin: top;
	-webkit-transform: perspective(600px) rotateX(90deg) scale(.9);
	   -moz-transform: perspective(600px) rotateX(90deg) scale(.9);
	    -ms-transform: perspective(600px) rotateX(90deg) scale(.9);
	     -o-transform: perspective(600px) rotateX(90deg) scale(.9);
	        transform: perspective(600px) rotateX(90deg) scale(.9);
}
.boxes.perspective span.bottom::after {
	transform-origin: bottom;
	-webkit-transform: perspective(250px) rotateX(65deg) scale(.9);
	   -moz-transform: perspective(250px) rotateX(65deg) scale(.9);
	    -ms-transform: perspective(250px) rotateX(65deg) scale(.9);
	     -o-transform: perspective(250px) rotateX(65deg) scale(.9);
	        transform: perspective(250px) rotateX(65deg) scale(.9);
}
.boxes.perspective span.bottom.big::after {
	transform-origin: bottom;
	-webkit-transform: perspective(600px) rotateX(-90deg) scale(.9);
	   -moz-transform: perspective(600px) rotateX(-90deg) scale(.9);
	    -ms-transform: perspective(600px) rotateX(-90deg) scale(.9);
	     -o-transform: perspective(600px) rotateX(-90deg) scale(.9);
	        transform: perspective(600px) rotateX(-90deg) scale(.9);
}
.boxes.perspective span.bottom.active::after, .boxes.perspective span.top.active::after, .boxes.perspective span.top.large.active::after, .boxes.perspective span.bottom.big.active::after {
	-webkit-transform: perspective(0) rotateX(0deg) scale(1);
	   -moz-transform: perspective(0) rotateX(0deg) scale(1);
	    -ms-transform: perspective(0) rotateX(0deg) scale(1);
	     -o-transform: perspective(0) rotateX(0deg) scale(1);
	        transform: perspective(0) rotateX(0deg) scale(1);
}

.boxes.perspective span.per-ryy::after {
	-webkit-transform: perspective(600px) rotateY(45deg) scale(.9);
	   -moz-transform: perspective(600px) rotateY(45deg) scale(.9);
	    -ms-transform: perspective(600px) rotateY(45deg) scale(.9);
	     -o-transform: perspective(600px) rotateY(45deg) scale(.9);
	        transform: perspective(600px) rotateY(45deg) scale(.9);
}
.boxes.perspective span.per-ryy.active::after {
	-webkit-transform: perspective(0) rotateY(-45deg) scale(1);
	   -moz-transform: perspective(0) rotateY(-45deg) scale(1);
	    -ms-transform: perspective(0) rotateY(-45deg) scale(1);
	     -o-transform: perspective(0) rotateY(-45deg) scale(1);
	        transform: perspective(0) rotateY(-45deg) scale(1);
}

.boxes.perspective span.per-rxx::after {
	-webkit-transform: perspective(250px) rotateX(65deg) scale(.9);
	   -moz-transform: perspective(250px) rotateX(65deg) scale(.9);
	    -ms-transform: perspective(250px) rotateX(65deg) scale(.9);
	     -o-transform: perspective(250px) rotateX(65deg) scale(.9);
	        transform: perspective(250px) rotateX(65deg) scale(.9);
}
.boxes.perspective span.per-rxx.active::after {
	-webkit-transform: perspective(0) rotateX(-45deg) scale(1);
	   -moz-transform: perspective(0) rotateX(-45deg) scale(1);
	    -ms-transform: perspective(0) rotateX(-45deg) scale(1);
	     -o-transform: perspective(0) rotateX(-45deg) scale(1);
	        transform: perspective(0) rotateX(-45deg) scale(1);
}

/* Zoom */
.boxes.zoom span.in::after {
	-webkit-transform: scale(2);
	   -moz-transform: scale(2);
	    -ms-transform: scale(2);
	     -o-transform: scale(2);
	        transform: scale(2);
	border-radius: 100%;
}
.boxes.zoom span.in.active::after {
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
	border-radius: 4px;
}
.boxes.zoom span.out::after {
	-webkit-transform: scale(0);
	   -moz-transform: scale(0);
	    -ms-transform: scale(0);
	     -o-transform: scale(0);
	        transform: scale(0);
	border-radius: 100%;
}
.boxes.zoom span.out.active::after {
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
	border-radius: 4px;
}

.boxes.zoom span.in-out.active::after {
	animation: zoomInOut .5s;
}

@keyframes zoomInOut {
	0% {
		-webkit-transform: scale(.5);
		   -moz-transform: scale(.5);
		    -ms-transform: scale(.5);
		     -o-transform: scale(.5);
		        transform: scale(.5);
		        border-radius: 100%;
	}
	50% {
		-webkit-transform: scale(1.5);
		   -moz-transform: scale(1.5);
		    -ms-transform: scale(1.5);
		     -o-transform: scale(1.5);
		        transform: scale(1.5);
	}
	100% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
		    -ms-transform: scale(1);
		     -o-transform: scale(1);
		        transform: scale(1);
		border-radius: 4px;
	}
}


.boxes.zoom span.out-in.active::after {
	animation: zoomOutIn .5s;
}

@keyframes zoomOutIn {
	0% {
		-webkit-transform: scale(1.5);
		   -moz-transform: scale(1.5);
		    -ms-transform: scale(1.5);
		     -o-transform: scale(1.5);
		        transform: scale(1.5);
		border-radius: 100%;
	}
	50% {
		-webkit-transform: scale(.5);
		   -moz-transform: scale(.5);
		    -ms-transform: scale(.5);
		     -o-transform: scale(.5);
		        transform: scale(.5);
	}
	100% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
		    -ms-transform: scale(1);
		     -o-transform: scale(1);
		        transform: scale(1);
		border-radius: 4px;
	}

}


Javascript/jQuery

 $('[dd-boxes] span').click(function() {
	$(this).parent().find('span').removeClass('active');
	$(this).addClass('active');
});

Hope you guys liked the demo!


Other Resources/3rd Party Libraries

  • jQuery
  • Google Fonts: Nunito