使用：css动画的目标伪类

我正在尝试使svg图标可单击以触发svg框的动画。 当使用：active伪类时，我可以让气泡移动，但是一旦我添加：target，任何东西都不起作用

下面是我的css的外观

#calendar .calendartab  {
cursor: pointer;
transform-origin: 50% 50%;
transform: translateY(10px);
transition-duration: 0.3s;
transition-timing-function: ease-in-out forwards;
}

#calendar .calendartab:target {
transform: translateY(200px);
}

---

下面是我在JSFIDLE上的一些代码

---

ref:-包括当前输出与预期输出，因为从代码中删除“：target”确实会做出更改，并且不清楚您想要什么，因为“可点击按钮”没有任何作用：target“如果相关，您的小提琴有一个结束标记

，但没有开始标记。由于

：target

与URI绑定，您是否打算将链接点指向id？我遗漏了几行代码。我试着点击图标，让白色的气泡降下来。我为图标添加了一个href，并将其指向方框。我看到很多目标示例都使用div id，这与g id相同吗？谢谢你的帮助！