¿Cómo se animan las pestañas para que cuando hagas clic en la pestaña se deslice?

he probado el código de transición

esto es lo que tengo hasta ahora

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

gracias de antemano