Is there a way to create animated tabs that slide in when clicked?
I've experimented with using transition code but haven't quite achieved the desired effect yet.
This is what I currently have:
[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;
}
Any guidance or suggestions would be greatly appreciated. Thank you!