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

Question

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

我的问题是，我有一个带有两个背景图像的 <span></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

Answer 2

想法是使用伪元素将元素拆分为两个元素，然后您可以分别并同时为它们设置动画：

body {
  background: black;
}

.menu-item-link {
  margin-left: 5px;
  color: white;
  text-decoration: none;
}

.menu-item {
  color: white;
  text-align: center;
  padding-top: 5px;
  display: block;
  width: 30px;
  height: 30px;
  background-image: url("https://openclipart.org/image/2400px/svg_to_png/247374/Mars.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
}

.menu-item:before {
  content:"";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index:1;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQ4NS42ODggNDg1LjY4OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDg1LjY4OCA0ODUuNjg4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTM2NC4yNjksNDUzLjE1NUgxMjEuNDE2TDAsMjQyLjg0NEwxMjEuNDE2LDMyLjUzM2gyNDIuODUzbDEyMS40MTksMjEwLjMxMkwzNjQuMjY5LDQ1My4xNTV6IE0xMzEuOTA1LDQzNC45OTdoMjIxLjg3OCAgICBsMTEwLjkzOS0xOTIuMTUyTDM1My43ODMsNTAuNjkxSDEzMS45MDVMMjAuOTY2LDI0Mi44NDRMMTMxLjkwNSw0MzQuOTk3eiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
  background-size: contain;
  background-repeat: no-repeat;
}

.menu-item:hover {
  animation-name: anime1;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  color: transparent;
}
.menu-item:hover::before {
  animation-name: anime2;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes anime1 {
  from {
    width: 30px;
    height: 30px;
    transform: rotate(0deg);
  }
  to {
    width: 50px;
    height: 50px;
    transform: rotate(210deg);
  }
}
@keyframes anime2 {
  from {
    transform: rotate(0deg);
    opacity:0;
  }
  to {
    transform: rotate(-210deg);
    opacity:1;
  }
}

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