CSS animation on mouse leave - html

Question

So I'm trying to do something like tiles or what netflix does. I have a box that I am trying to make grow on mouse hover and reduce in size when the mouse leaves. So Far I have this.
.nav {
position: relative;
top: 25%;
width: 100%;
color: black;
text-align: center;
}
.nav a {
color: white;
text-decoration: none;
}
.link {
font-size: 24px;
width: 100%;
height: 25%;
background: linear-gradient(135deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
display: inline;
padding-right: 12.5%;
padding-left: 12.5%;
padding-bottom: 6.25%;
padding-top: 6.25%;
box-shadow: 0px 0px 10px 5px grey;
animation-name: downsize;
animation-duration: .5s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.link:hover {
animation-name: resize;
animation-duration: .5s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-in-out;
font-size: 32px;
padding-right: 14.5%;
padding-left: 14.5%;
padding-bottom: 8.25%;
padding-top: 8.25%;
}
<div class="nav">
<a href="/public/MM/EnterUp">
<div class="link" style="margin-right: 15px;">
Enter Up
</div>
</a>
<a href="/public/MM/EnterUp">
<div class="link" style="margin-right: 15px;">
View Ups
</div>
</a>
</div>
I used CSS-Tricks
to get it to reduce after the mouse hover. My problem is that unlike CSS-Tricks, when you load the page I don't want the downsize animation to run, just after the mouse leaves. Anyone have a solution? Thanks for the help!

Answer 1

While there is no equivalent of the mouseleave or mouseout events in CSS, you can achieve the same behaviour by applying the "exit" transition to the selector and then overriding it with the "enter" transition using the :hover pseudo-class, like so:
div{
background:#000;
color:#fff;
font-size:16px;
line-height:100px;
text-align:center;
transition:font-size .5s ease-out,line-height .5s ease-out,width .5s ease-out;
width:100px;
}
div:hover{
font-size:20px;
line-height:125px;
transition:font-size .25s ease-in,line-height .25s ease-in,width .25s ease-in;
width:125px;
}
/* HOUSEKEEPING */
*{box-sizing:border-box;font-family:sans-serif;margin:0;padding:0;}
body,html{height:100%;}
body{align-items:center;display:flex;justify-content:center;}
<div>Text</div>
Alternatively, if the transition you wish to apply is the same in both cases, only reversed then there is no need to override it in your :hover selector.

Answer 2

you can simply just use transition for the padding
something like this in your case should do it:
.nav {
position: relative;
top: 25%;
width: 100%;
color: black;
text-align: center;
}
.nav a {
color: white;
text-decoration: none;
}
.link {
font-size: 24px;
width: 100%;
height: 25%;
background: linear-gradient(135deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
display: inline;
padding-right: 12.5%;
padding-left: 12.5%;
padding-bottom: 6.25%;
padding-top: 6.25%;
box-shadow: 0px 0px 10px 5px grey;
transition: padding 0.4s ease-out;
}
.link:hover {
font-size: 32px;
padding-right: 14.5%;
padding-left: 14.5%;
padding-bottom: 8.25%;
padding-top: 8.25%;
}
The key here is the use of:
transition: padding 0.4s ease-out;