Attempting to design a sidebar menu with CSS animations and striving to achieve the maximum without relying on JavaScript or JQuery. However, if necessary, using JS / JQuery is acceptable.
The challenge at hand involves an <span></span> element with two background images that require different animation behaviors. The first image should rotate and increase in size based on the span's dimensions, while the second image should remain static in size but only appear after the animation finishes.
Is it feasible to have completely distinct animations for each background image within one element? If so, how can this be accomplished?
Below is the current code structure:
The list utilizes an unordered list format where each <li></li> represents a menu item
<ul>
<li>
<a class="menu-item-link" href="#"><span class="menu-item">1</span>Active or hovered Menu</a>
</li>
<li><li>
</ul>
CSS styling with animation keyframes included:
.menu-item-wrapper {
width: 500px;
clear: both;
}
.menu-item-link {
margin-left: 5px;
color: white;
text-decoration: none;
}
.menu-item {
float: left;
color: white;
text-align: center;
padding-top: 5px;
display: block;
width: 30px;
height: 30px;
background-image: url("hexagon.svg"), url("mars.png");
background-size: contain;
background-repeat: no-repeat;
}
.menu-item:hover {
animation-name: menuAnimation;
animation-duration: 0.5s;
animation-fill-mode: forwards;
color: transparent;
}
@keyframes menuAnimation {
from {
width: 30px;
height: 30px;
transform: rotate(0deg);
}
to {
width: 50px;
height: 50px;
transform: rotate(210deg);
}
}
Here is a link to view the layout along with the code on a Fiddle: Fiddle Link
Lastly, here is an illustration of how the result should look after the animation completes (with the planet image and linked text visible):