如何為活動標簽設置動畫

Question

當您單擊它滑入的選項卡時，一個選項卡的動畫效果如何

我試過轉換代碼

這是我到目前為止所擁有的

        [data-tab-info] {
            display: none;
        }

        .active[data-tab-info] {
            display: block;
        }

        .tab-content {
            font-size: 30px;
            font-family: sans-serif;
            font-weight: bold;
        }

        .tabs {
            font-size: 40px;
            color: black;
            display: flex;
            margin: 30px;
        }

            .tabs span {
                transition: 0.3s linear;
                background: darkred;
                padding: 10px;
                border: 5px groove gray;
                border-radius: 5px;
            }

                .tabs span:hover {
                    background: firebrick;
                    cursor: url(https://cur.cursors-4u.net/cursors/cur-3/cur283.ani), url(http://www.rw-designer.com/cursor-download.php?id=58443), auto !important;
                    color: black;
                }

提前致謝

Answer 1

使用 :action 而不是 :hover 進行點擊操作。 在其中，您可以設置您希望在點擊時發生的操作。