When hovering over the word it comes out with a smooth animation but when we exit the hover state instead of reversing the animation it just cuts out. How could I make the animation smooth both when entering the hover state and exiting it?
Here is the example:
*{
font-size: 50px;
}
.container a{
position:relative;
float:left;
font-family: 'Montserrat', sans-serif;
font-weight:bold;
margin-left: 5%;
padding-right: 10px;
}
.child{
position:relative;
float:left;
display:none;
padding-left: 10px;
font-weight:bold;
}
.container:hover > .child{
transition: .4s;
color:#F0C930;
border-left: 4px solid #F0C930;
animation: effect .5s;
display:block;
}
@keyframes effect{
from{
position:relative;
padding-left: 0px;
opacity:0;}
to{
position:relative;
padding-left: 10px;
opacity:1;
}
}
}
<p>hover over "Word"</p>
<div class="container">
<a>Word</a>
<div class="child">Word</div>
</div>