Chromeでページ読み込み時にanimationが効いてしまう

Question

前提・実現したいこと

以下のようなCSSの書き方を行うと読み込み時にアニメ－ジョンが動いてしまいます。
これを読み込み時にanimationが作動しないようにしたいのですが何かいい方法はないでしょうか？

発生している問題・エラーメッセージ

ページ読み込み時にanimationが作動する

CSS

.elevator_panel{
    width: 100%;
    height: 18%;
    box-sizing: border-box;
    border-top: #EFF1D6 4px solid;
    border-left: #EFF1D6 4px solid;
    border-right: #EFF1D6 4px solid;
    cursor: pointer;
    position: relative;
    background-size: cover;
    animation-name: panel-select-mause-out;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.elevator_panel:hover{
    animation-name: panel-select-mause-over;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    /* border: coral 4px solid; */
}

@keyframes panel-select-mause-over{
    0%{
        transform: scale(1,1);
    }
    0.001%{
        border-bottom: #EFF1D6 4px solid;
    }
    100%{
        transform: scale(1.1,1.1);
        border-bottom: #EFF1D6 4px solid;
        z-index: 9999;
    }
}

@keyframes panel-select-mause-out{
    0%{
        transform: scale(1.1,1.1);
        border-bottom: #EFF1D6 4px solid;
        z-index: 9999;
    }
    0.001%{
        border-bottom: #EFF1D6 4px solid;
    }
    100%{
        transform: scale(1,1);
    }
}

試したこと

以下のサイトで紹介されている方法が応用できないか考えました。
Chromeでページ読み込み時にtransitionが効いてしまう件

Answer 1

現状のアニメーションをみてみると、
ホバーで、サイズは0.5sかけて1.1倍、border-bottom は瞬間的(0.0005s)に表示させる、
ということのようですね。

ならば、animation ではなく transition でいいのでは。

下記のように設定すれば transform のみアニメーションして、border-bottom は瞬間的に表示/非表示が切り替わります。

.elevator_panel{
    width:90%;
    height:18%;
    box-sizing: border-box;
    border-top: #EFF1D6 4px solid;
    border-left: #EFF1D6 4px solid;
    border-right: #EFF1D6 4px solid;
    cursor: pointer;
    position: relative;
    background-size: cover;
    transition: transform 0.5s;
}

.elevator_panel:hover{
  transform: scale(1.1,1.1);
  border-bottom: #EFF1D6 4px solid;
}

Answer 2

キーフレームの適当な%まで変化がないアニメをいれておくとか
loadやpageshowをまってcssを追加するとか