javascript - 第二个背景图像的不同动画行为

Question

我正在尝试创建一个带有动画的侧边栏菜单，并尝试尽可能多地只使用 css。如果不可能，JS/JQuery 也可以。

我的问题是，我有一个 <span></span>带有两个背景图像的元素，我想为它们设置不同的动画行为。第一个应该根据跨度的大小旋转并增加它的大小，第二个不应该旋转并保持与以前相同的大小，而应该只在动画结束后出现。

是否可以为每个背景图像在一个元素上制作完全不同的动画？如果是，如何？

到目前为止，这是我的代码:

列表是用无序列表完成的，每个<li></li>应该包含一个菜单项

<ul>
    <li>
        <a class="menu-item-link" href="#"><span class="menu-item">1</span>Active or hovered Menu</a>
    </li>
    <li><li>
</ul>

一些带有动画关键帧的 CSS

.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);
    }
}

And a Fiddle

这就是动画结束后的样子(行星图像和链接文本应该只在动画结束后可见)

Answer 1

你的意思是这样的吗？

.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;
  position: relative;
}

.menu-item::before {
  content: "";
  background-color: green;
  background-image: url("hexagon.svg"); /*added bg color because of the missing image*/
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left:0;
  width: 30px;
  height: 30px;
  transition: all 0.5s ease;
}
.menu-item::after {
  content: "";
  background-color: red;
  background-image: url("mars.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left:0;
  bottom: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0s 0.5s ease;
}

.menu-item:hover::before {
  animation-name: menuAnimation;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  width: 50px;
  height: 50px;
  transform: rotate(210deg);
}

.menu-item:hover::after {
  opacity: 1;
}

https://codepen.io/zothynine/pen/GQQdLp