I have this code trying to make an animation on hover. Something like this :
TextLink hover: TextLink
-------- -- ----
I am trying to have an animation that looks like the "transparent" portion is moving from left till the end of the text.
body {
margin: 0;
background: #16263d;
}
div {
padding: 30px;
}
a {
color: #fff;
text-decoration: none;
display: block;
margin-top: 24px;
transition: all 0.75s ease-in-out;
}
a span {
border-bottom: 2px solid #fff;
}
a:hover:after {
opacity: 1;
-ms-filter: none;
filter: none;
transform: translateX(100%);
}
a:after {
content: '';
width: 35px;
height: 2px;
background: #16263d;
display: block;
position: relative;
opacity: 1;
transform: translateX(-35px);
transition: all 0.75s ease-in-out;
}<div>
<a href="#"><span>Text Link and something more than this</span></a>
</div>The problem is that 100% of the transform transition is not taken into consideration … seems like only 100px are.
>Solution :
First, you need to understand that percent values on transform are a portion of the element’s width, not of it’s parent. As the pseudo element is 35px wide, the transform moves it 35px. (see MDN for more info)
This said, you could use a border on the pseudo element for the "transparent" portion like this :
body {
margin: 0;
background: #16263d;
}
div {
padding: 30px;
}
a {
position:relative;
color: #fff;
text-decoration: none;
display: inline-block;
margin-top: 24px;
transition: all 0.75s ease-in-out;
}
a span {
border-bottom: 2px solid #fff;
}
a:hover:after {
opacity: 1;
-ms-filter: none;
filter: none;
transform: translateX(100%);
}
a:after {
content: '';
position:absolute;
bottom:-2px;
right:100%;
border-right: 35px solid #16263d;
height: 2px;
width:100%;
transition: all 0.75s ease-in-out;
}<div>
<a href="#"><span>Text Link and something more than this</span></a>
</div>