みかづきブログ その3

3ヶ月つづけてみました。

keyframeアニメーション終了時に終了時の状態を維持する

結論からいえば、animation-fill-modeプロパティを forwards にすればOKです。

developer.mozilla.org


DEMO


CSS

.box {
    position: absolute;
    top: 0;
    margin: 10px;
    width: 0; height: 0;
    background: #3e3e3e;
    box-shadow: 0 0 10px rgba(0, 0, 0, .25);
}

.b1 {
    left: 0;
    animation: anim 2.5s ease-in-out .5s;
}

.b2 {
    left: 110px;
    animation: anim 2.5s ease-in-out .5s forwards;
}

@keyframes anim {
    0% {
        width: 0px; height: 0px;
    }
    
    100% {
        width: 100px; height: 100px;
    }
}