Question

我有2个关键帧，每个关键帧都使用“ transform”属性，然后我尝试使用animation属性来调用它们，但是如果我在动画的第二行中将“ fill-mode”属性设置为“ backwards”，使用animation属性调用的第一个关键帧会被忽略吗？为什么会这样？

代码如下：

HTML

iter := client.Collection("users").Where("customer_id", "<", 10000).Documents(ctx)

CSS

<!DOCTYPE html>
<html>
<head>
    <title>SVG Animation</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="218.8 226.8 258.4 258.3">
    <g class="all">
      <clippath id="bg">
        <circle cx="348" cy="356" r="129.2"/>
      </clippath>
      <g class="stars" clip-path="url(#bg)">
        <circle class="stars-bg" fill="#3079AB" stroke="#95C7E8" stroke-width="6" stroke-linecap="round" cx="348" cy="356" r="129.2"/>
        <path class="star" opacity="0.75" fill="#FFFFFF" d="M409.7,337.4c-1.2-1-2.2-1.2-8.4-1c-3,0-6.9,0.2-11.9,0.5c-5.7,0.2-11.4,0.7-14.6,1
          c-1.2-2.5-3.7-6.9-6.4-11.6c-6.9-11.6-9.9-15.3-11.6-17.1c-1.5-2-3.2-1.7-3.7-1.7h-0.2h-0.2c-0.5,0-2.5,0.5-3.2,2.7
          c-1.2,2-3,6.4-6.2,19.5c-1.2,5.2-2.2,10.1-3,12.9c-3,0.7-8.7,2-14.1,3.2c-4.7,1.2-8.7,2.2-11.6,3c-5.7,1.5-6.9,2.2-7.7,3.5
          c-0.7,1-1,2.2-0.5,3.5c0.5,2,2,4.9,15.6,13.4c4.5,2.7,8.7,5.4,11.4,6.9c-0.5,3.2-1.5,9.4-2.5,15.6c-0.7,5.4-1.5,9.6-1.7,12.9
          c-0.7,5.9-0.7,7.9,1.2,9.4c0.7,0.5,1.7,1,3.7,0.7c1.2-0.2,4.5-0.7,18.6-10.9c5.4-4,10.4-7.9,13.1-10.1c3.2,1.2,9.2,3.7,15.3,5.9
          c16.3,5.9,19.5,5.4,20.8,5.2c1.7-0.2,2.7-1.2,3.2-1.7c1.5-2,0.7-4-1.5-9.4c-1.2-3-3-6.9-5.2-11.6c-2.7-5.7-5.4-11.4-6.9-14.3
          c2-2.2,5.4-5.9,8.9-9.9c10.6-12.1,11.4-15.3,11.1-17.3C411.5,339.4,410.7,338.4,409.7,337.4z"/>
        <path class="star" opacity="0.6" fill="#FFFFFF" d="M310.3,334.7c-0.5-0.7-1-1.2-4-2.5c-1.5-0.7-3.5-1.5-6.2-2.5
          c-3-1.2-5.9-2.2-7.7-3c0-1.5-0.2-4.5-0.7-7.4c-0.7-7.4-1.5-10.1-2-11.1c-0.2-1.2-1.2-1.7-1.5-1.7c0,0,0,0-0.2,0c0,0,0,0-0.2,0
          c-0.2,0-1.2-0.2-2.2,0.7c-1,0.7-3,2.5-7.7,8.4c-1.5,2.5-3,4.7-4,5.9c-1.7-0.2-4.7-1-7.9-1.5c-2.7-0.5-4.9-1-6.4-1.2
          c-3.5-0.5-4-0.5-4.7,0c-0.7,0.2-1,1-1.2,1.5c-0.2,1.2,0,3,4.9,10.4c1.5,2.5,3.2,4.7,4.2,6.2c-1,1.5-3,4.5-4.7,7.4
          c-1.7,2.5-3,4.5-3.7,6.2c-1.7,3-2.2,4-1.5,5.2c0.2,0.5,0.7,1,1.7,1.2c0.7,0.2,2.5,0.7,11.9-1.2c3.7-0.7,7.2-1.7,8.9-2.2
          c1.2,1.5,3.7,4,6.4,6.4c6.9,6.7,8.7,7.2,9.4,7.4c1,0.2,1.7,0,2-0.2c1.2-0.7,1.2-1.7,1.5-5.2c0-1.7,0-4.2,0-7.2
          c0-3.5-0.2-6.9-0.2-8.9c1.5-0.7,4.2-1.7,6.7-3c8.2-3.7,9.2-5.2,9.6-6.2C310.5,336.2,310.5,335.5,310.3,334.7z"/>
        <path class="star" opacity="0.4" fill="#FFFFFF" d="M446.1,360.4c-0.5-0.2-0.7-0.2-3-0.2c-1,0-2.5,0.2-4.2,0.5
          c-2,0.2-4,0.5-4.9,0.7c-0.5-0.7-1.5-2.2-2.5-3.7c-2.7-4-3.7-4.9-4.5-5.4c-0.5-0.7-1.2-0.5-1.5-0.5l0,0l0,0c-0.2,0-0.7,0.2-1,1
          c-0.2,0.7-1,2.2-1.7,6.9c-0.2,1.7-0.5,3.5-0.7,4.5c-1,0.2-3,1-4.7,1.5c-1.7,0.5-3,1-4,1.2c-2,0.7-2.2,1-2.5,1.5
          c-0.2,0.2-0.2,0.7,0,1.2c0.2,0.7,0.7,1.5,5.7,4.2c1.5,0.7,3.2,1.7,4,2c0,1.2-0.2,3.2-0.5,5.4c-0.2,1.7-0.2,3.5-0.2,4.5
          c0,2,0,2.7,0.7,3.2c0.2,0.2,0.7,0.2,1.2,0.2c0.5,0,1.5-0.2,6.2-4.2c1.7-1.5,3.5-3,4.2-3.7c1.2,0.2,3.2,1,5.4,1.7
          c5.7,1.5,6.9,1.2,7.2,1.2c0.5-0.2,1-0.5,1-0.7c0.5-0.7,0.2-1.2-0.7-3.2c-0.5-1-1.2-2.2-2.2-4c-1-2-2.2-3.7-2.7-4.7
          c0.7-0.7,1.7-2.2,2.7-3.7c3.2-4.5,3.5-5.4,3.5-6.2C446.6,361.2,446.3,360.7,446.1,360.4z"/>
      </g>
    </g>
    </svg>

</body>
</html>

“。star：nth-of-type（1）”类的中间星只能缩放，但是如果我从中更改第57行

/* --------------------------
  Base
--------------------------- */

body {
  padding-top: 60px;
    background: #0f4e7a;
}

svg {
    margin: auto;
  display: block;
    width: 28%;
}

/* --------------------------
  Keyframes
--------------------------- */

@keyframes move{
  0%{
    transform: translate3d(0,300%,0);
  }
  60%{
    transform: translate3d(0,-20px,0);
  }
  100%{
    transform: translate3d(0,0,0);
  }
}

@keyframes rotate {
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.1);
  }
  100%{
    transform: scale(1);
  }
}


/* --------------------------
  SVG Styles
--------------------------- */

.all *{
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

.star:nth-of-type(1) {
  transform: translate3d(0,0,0);
  animation: move 1s 0s ease-out backwards,
  rotate .4s 1.5s linear backwards;

}

.star:nth-of-type(2) {
  animation: move 1s .5s ease-out backwards;
}

.star:nth-of-type(3) {
  animation: move 1s 1s ease-out backwards;
}

对此

  rotate .4s 1.5s linear backwards;

中间星既平移又缩放，这种行为背后的原因是什么？

SVG动画中的关键帧会取消先前的关键帧

0 个答案: