如何将两段 CSS 编织在一起

Question

我正在使用 Cornerstone Themeco Active X 构建器，我想在我的评论星星上有闪闪发光的金色效果。这是通过添加一个类和一些 CSS 来实现的，因此我想为其设置动画，但是使用内置动画使其变得不稳定并且运行不流畅。如何构建我的 CSS 以便它在同一个类中完成所有操作？以下是我想要使用的 CSS 的两部分：

闪光CSS

.css-selector-star-gold {

background: linear-gradient(270deg, #eede5e, #dbbb0f, #f3f2e7, #ddcd4c, #eede5e);
background-size: 1000% 1000%;

-webkit-animation: GoldGradiant 8s ease infinite;
-moz-animation: GoldGradiant 8s ease infinite;
animation: GoldGradiant 8s ease infinite;
}

@-webkit-keyframes GoldGradiant {
0%{background-position:0% 11%}
50%{background-position:100% 90%}
100%{background-position:0% 11%}
}
@-moz-keyframes GoldGradiant {
0%{background-position:0% 11%}
50%{background-position:100% 90%}
100%{background-position:0% 11%}
}
@keyframes GoldGradiant {
0%{background-position:0% 11%}
50%{background-position:100% 90%}
100%{background-position:0% 11%}
}

滚动的缩放效果

     animation: StarScale 2s ease 0s 1 normal forwards;
     @keyframes StaScale {
    0% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1);
    }
}

我该如何将它们编织在一起？

我尝试将 CSS 添加在一起，但动画可以工作，而微光却不能？

Answer 1

组合 HTML 元素，而不是 CSS。只需将具有动画 A 的元素放置在具有动画 B 的元素内即可。

div {
  padding: 20px;
  margin: 10px;
}

.css-selector-star-gold {
  background: linear-gradient(270deg, #eede5e, #dbbb0f, #f3f2e7, #ddcd4c, #eede5e);
  background-size: 1000% 1000%;
  -webkit-animation: GoldGradiant 8s ease infinite;
  -moz-animation: GoldGradiant 8s ease infinite;
  animation: GoldGradiant 8s ease infinite;
}

@-webkit-keyframes GoldGradiant {
  0% {
    background-position: 0% 11%
  }
  50% {
    background-position: 100% 90%
  }
  100% {
    background-position: 0% 11%
  }
}

@-moz-keyframes GoldGradiant {
  0% {
    background-position: 0% 11%
  }
  50% {
    background-position: 100% 90%
  }
  100% {
    background-position: 0% 11%
  }
}

@keyframes GoldGradiant {
  0% {
    background-position: 0% 11%
  }
  50% {
    background-position: 100% 90%
  }
  100% {
    background-position: 0% 11%
  }
}

.star-scale {
  animation: StarScale 2s ease 0s 1 normal forwards;
}

@keyframes StarScale {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

<div class="css-selector-star-gold">
  hello world
</div>

<div class="star-scale">
  how are you?
</div>

<div class="star-scale">
  <div class="css-selector-star-gold">
    both
  </div>
</div>