マウスのCSSアニメーションを残す

Question

私はタイルのようなものやnetflixのことをやろうとしています。私は、マウスを動かすと成長し、マウスが離れるとサイズが小さくなるようにしようとしている箱があります。だから私はこれを持っています。

.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>

私はそれは、マウスのホバー後に減らすために取得するCSS-Tricks を使用。私の問題は、CSS-Tricksとは異なり、ページを読み込むときにマウスが去った直後にアニメーションを実行したくないということです。誰にでも解決策がありますか？助けてくれてありがとう！

Answer 1

CSSでmouseleaveまたはmouseoutイベントの同等はありませんが、あなたは、セレクタに「終了」トランジションを適用し、その後:hover疑似クラスを使用して、「入力」の移行とそれをオーバーライドすることで同じ動作を実現することができます、そのよう：transitionあなたが適用したいだけ逆に、どちらの場合も同じである場合

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>

また、その後、あなたでそれをオーバーライドする必要はありませんセレクタ。