尝试在 CSS 中模拟按下触发器

Question

我在 Inkscape 中设计了一个 svg 触发器。我试图让它沿着左上角的固定点旋转。 toggleClass 函数有效，所以我的 CSS 一定有错误。我犯了一个明显的错误吗？感谢您的帮助！

$("#pumpPath").click(function() {
  $(this).toggleClass("released pressed");
});

.pump pressed {
  animation: pressPump 1s;
}

@keyframes pressPump {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(45deg);
  }
}

.pump released {
  animation: pressPump 1s;
}

@keyframes pressPump {
  0% {
    transform: rotate(45deg);
    transform-origin: top left;
  }
  100% {
    transform: rotate(0deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg>
 <g
     inkscape:groupmode="layer"
     inkscape:label="Image"
     id="g18"
     transform="translate(-25.228074,50.926481)">
<path id="pumpPath" class="pump released"
       d="m 157,-24.996944 5.5232,0.04031 a 2.9460419,2.9460419 45.938035 0 1 2.92359,3.020921 l -0.74066,29.1006192 a 37.585303,37.585303 86.894374 0 0 0.32403,5.9721938 l 0.31135,2.312139 a 28.399823,28.399823 76.300744 0 0 1.41309,5.797059 l 5.75786,16.055202 a 0.89068854,0.89068854 143.73474 0 1 -1.3769,1.010147 l -2.18338,-1.657206 a 15.29309,15.29309 48.297403 0 1 -3.91693,-4.395867 l -4.25696,-7.19697 a 26.223134,26.223134 65.922438 0 1 -2.43197,-5.442465 l -2.11417,-6.684476 a 50.289884,50.289884 75.862746 0 1 -1.46287,-5.807956 l -0.94089,-4.9683892 a 4.4404149,4.4404149 45.233178 0 0 -3.50117,-3.5297862 L 134.94297,-4.4147688 A 3.6515921,3.6515921 50.594862 0 1 132,-7.996944 2.5520083,2.5520083 146.26953 0 1 135,-10 l 15.89061,-0.01619 a 3.0250546,3.0250546 135.17989 0 0 3.02189,-3.002976 l 0.0657,-8.999752 A 3.0000019,3.0000019 135.41813 0 1 157,-24.996944 Z"
       id="path24"
       sodipodi:nodetypes="ccccccccccccc"
       inkscape:original-d="m 154.00008,-25.018836 11.52304,0.08409 -0.89332,35.098677 1.11207,8.258469 7.78332,21.70299 -6.96264,-5.2847 L 159.25099,22.47948 155.32748,10.074314 153.27019,-0.78929718 132,-4.996944 v -4.9999999 l 21.89061,-0.0223 z"
       inkscape:path-effect="#path-effect25" />
</g>
 </svg>

Answer 1

您犯了一些基本错误，例如类名和同名动画。 就像您使用.pump pressed 一样，您需要使用.pump.pressed，因为两个类都指向同一个元素，然后它们组合成一个字符串，后跟一个点. 其次，为动画pressPump指定相同的名称。

希望现在事情和错误都已清除。

$("#pumpPath").click(function() {
  $(this).toggleClass("released pressed");
});

.pump.pressed {
  animation: pressPump1 1s;
}

@keyframes pressPump1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(45deg);
  }
}

.pump.released {
  animation: pressPump2 1s;
}

@keyframes pressPump2 {
  0% {
    transform: rotate(45deg);
    transform-origin: top left;
  }
  100% {
    transform: rotate(0deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg>
 <g
     inkscape:groupmode="layer"
     inkscape:label="Image"
     id="g18"
     transform="translate(-25.228074,50.926481)">
<path id="pumpPath" class="pump released"
       d="m 157,-24.996944 5.5232,0.04031 a 2.9460419,2.9460419 45.938035 0 1 2.92359,3.020921 l -0.74066,29.1006192 a 37.585303,37.585303 86.894374 0 0 0.32403,5.9721938 l 0.31135,2.312139 a 28.399823,28.399823 76.300744 0 0 1.41309,5.797059 l 5.75786,16.055202 a 0.89068854,0.89068854 143.73474 0 1 -1.3769,1.010147 l -2.18338,-1.657206 a 15.29309,15.29309 48.297403 0 1 -3.91693,-4.395867 l -4.25696,-7.19697 a 26.223134,26.223134 65.922438 0 1 -2.43197,-5.442465 l -2.11417,-6.684476 a 50.289884,50.289884 75.862746 0 1 -1.46287,-5.807956 l -0.94089,-4.9683892 a 4.4404149,4.4404149 45.233178 0 0 -3.50117,-3.5297862 L 134.94297,-4.4147688 A 3.6515921,3.6515921 50.594862 0 1 132,-7.996944 2.5520083,2.5520083 146.26953 0 1 135,-10 l 15.89061,-0.01619 a 3.0250546,3.0250546 135.17989 0 0 3.02189,-3.002976 l 0.0657,-8.999752 A 3.0000019,3.0000019 135.41813 0 1 157,-24.996944 Z"
       id="path24"
       sodipodi:nodetypes="ccccccccccccc"
       inkscape:original-d="m 154.00008,-25.018836 11.52304,0.08409 -0.89332,35.098677 1.11207,8.258469 7.78332,21.70299 -6.96264,-5.2847 L 159.25099,22.47948 155.32748,10.074314 153.27019,-0.78929718 132,-4.996944 v -4.9999999 l 21.89061,-0.0223 z"
       inkscape:path-effect="#path-effect25" />
</g>
 </svg>