Active and focus animations in css

Creative active and focus animations using CSS and

 Techmates    18 Sep, 2018    1177

In this post, we'd love to share active and focus animations using CSS and JS. We've used Perspective CSS property in this demo. 

This will pop-out the menu/links of your web page.

 

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');
});

 

I hope you guys liked the snippet!

 


Credits / Resources

  • jQuery
  • Google Fonts: Nunito



Related Snippets