css 幀動畫實作從中間向兩邊延伸

• html

• css

<style>
        #box{
            width: 10vw;
            height: 10vw;
            background-color:pink;
            position:relative;
        }
        #box::after{ /*僞類, 添加一個下劃線, 但是不給寬度*/
            content: '';
            height: 10px;
            background-color: cyan;
            position:absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%);
        }
        #box:hover:after{ /*hover的時候給一個動畫*/
            animation-name: ani;
            animation-duration:.5s;
            animation-fill-mode:forwards; /*動畫停在最後100%時候的狀态*/
            animation-direction:alternate;
        }
        @keyframes ani{ /*這個動畫的意思就是寬度從0-100*/
            from{
                width: 0;
            }
            to{
                width: 100%;
            }
        }
    </style>