Gradient Underline Animation

gradient-underline-animation.markdown

Gradient Underline Animation

Using a css background gradient and css animation this allows the animation of a link underline to carry across multiple lines. This previously would be achieved using the ':pseudo' elements. However doing this over multiple lines proved tricky.

A Pen by Colin Horn on CodePen.

License.

index.html

<div class="m-linkitem">
	<h1>Hover Below</h1>
	<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quia natus repudiandae consequuntur tenetur consequatur.</a>
</div>

scripts

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://use.fontawesome.com/b5bf1bd49e.js"></script>

style.scss

$f-title:'Roboto', sans-serif;
$f-body:'Open Sans', sans-serif;

@mixin centre($axis: "both") {
	position: absolute;
	@if $axis == "y" {
		top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	@if $axis == "x" {
		left: 50%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	@if $axis == "both" {
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-51%, -50%);
		-moz-transform: translate(-51%, -50%);
		-ms-transform: translate(-51%, -50%);
		-o-transform: translate(-51%, -50%);
		transform: translate(-51%, -50%);
	}
}
@mixin font-size($sizeValue: 1.6, $lineHeight: 2.4) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
  line-height: ($lineHeight * 10) + px;
}
@mixin fontawesome {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes backgroundGradient { 
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}

@keyframes loadBounce { 
    0%{transform:translate(-50%, -50%) scale(0);}
	40%{transform:translate(-50%, -50%) scale(1.2);}
	60%{transform:translate(-50%, -50%) scale(1);}
	80%{transform:translate(-50%, -50%) scale(1.1);}
	100%{transform:translate(-50%, -50%) scale(1);}
}
	

body{
	margin:0;
	padding:0;
	width:100vw;
	height:100vh;
	font-family:$f-body;
	background: linear-gradient(180deg, #111, #00393c);
background-size: 400% 400%;
animation: backgroundGradient 30s ease infinite;
}

h1, h2, h3, h4{
	font-family:$f-title;
	font-weight:900;
	color:#fff;
}

p{
	@include font-size(1.8, 2.6);
}

.m-linkitem{
	@include centre();
	max-width:500px;
	width:100%;
	// text-align:center;
	transform-origin:center;
	animation: loadBounce 0.5s ease-in-out forwards;
	
	a{
		transition:all 1s linear;
		display:inline;
		@include font-size(2.2, 4.5);
		color:#fff;
		text-decoration:none;
		text-transform:uppercase;
		font-weight:600;
		padding-bottom:5px;
		background: linear-gradient(to right, rgba(0,209,177,1) 0%,rgba(39,143,198,1) 98%);
		background-size:0px 2px;
		background-repeat: no-repeat;
		background-position:left 85%;
		text-shadow:0;
		
		&:hover{
			background-size:100% 2px;
			text-shadow:0 2.5px 4px rgba(0,0,0,0.5);
		}
	}
}