how does one animate tabs so like when you click the tab it slides in

i've tried the transition code

here's what i have so far

        [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;
                }

thanks, in advance