Javascript css同步关键帧动画

我想同步三个不同元素的关键帧动画

它们基本上是三颗心脏，我希望它们在单击时跟随心跳动画

当两个或两个以上被单击时，我希望它们同步“跳动”

您可以检查JSbin

到目前为止，我得到的是：

.rating{
位置：相对位置；
排名：0；
左：0；
右：0；
底部：0；
宽度：140px；
高度：50px；
填充物：5px10px；
保证金：自动；
边界半径：30px；
背景：#FFF；
显示：块；
溢出：隐藏；
unicode-bidi:bidi覆盖；
方向：rtl；
}
.额定值：未（：选中）>输入{
显示：无；
}
/*喜欢*/
#像{
底部：-65px；
}
#like:not（：checked）>标签{
光标：指针；
浮动：对；
宽度：30px；
高度：30px；
显示：块；
右边距：7.5px；
颜色：rgba（233,54,40,4）；
线高：42px；
文本对齐：居中；
过渡：颜色0.2s；
}
#比如：not（：checked）>label:hover，
#like:not（：checked）>label:hover~label{
颜色：rgba（233,54,40,6）；
}
#like>输入：选中+标签：悬停，
#like>input:checked+label:hover~label，
#like>input:checked~label:hover，
#like>input:checked~label:hover~label，
#like>label:hover~input:checked~label{
颜色：rgb（233,54,40）；
}
#喜欢>输入：选中~标签{
颜色：rgb（233,54,40）；
动画：1s心跳无限；
}
@关键帧心跳{
从{
变换：比例（1）；
变换原点：中心；
动画计时功能：放松；
}
10% {
转换：比例（1.2）；
动画计时功能：轻松自如；
}
15% {
变换：比例（1）；
动画计时功能：放松；
}
25% {
转换：比例（1.15）；
动画计时功能：轻松自如；
}
35% {
变换：比例（1）；
动画计时功能：放松；
}
}

♥
♥
♥

您可以设置3个相同的动画，并设置输入和标签的样式，以便在选择新单选按钮时，旧动画停止，新动画开始。这样，两颗心将始终保持同步：

工作示例：

div{
显示：块；
位置：相对位置；
宽度：125px；
高度：60px；
盒影：3px3pxRGBA（1271270.4）；
}
输入{
显示：无；
}
标签{
位置：绝对位置；
显示：内联块；
排名：0；
字体大小：40px；
线高：60px；
颜色：rgba（255、127、127、0.75）；
}
标签：悬停，
标签：悬停~标签{
颜色：rgba（255,0,0,0.75）；
}
.像{
左：10px；
}
.like2{
左：50px；
}
.像{
左：90px；
}
#如1：选中~标签{
动画：heartbeat1 0.8s无限；
}
#如2：选中~标签{
动画：HeartBeat20.8s无限；
}
#如3：选中~标签{
动画：heartbeat3 0.8s无限；
}
@关键帧心跳1{
0% {
颜色：rgba（255,0,0,0.5）；
}
50% {
颜色：rgba（255,0,0,1）；
}
}
@关键帧心跳2{
0% {
颜色：rgba（255,0,0,0.5）；
}
50% {
颜色：rgba（255,0,0,1）；
}
}
@关键帧心跳3{
0% {
颜色：rgba（255,0,0,0.5）；
}
50% {
颜色：rgba（255,0,0,1）；
}
}

♥
♥
♥

修改了@Rounin的答案，为您提供了所需的输出

div{
显示：块；
位置：相对位置；
宽度：125px；
高度：60px；
盒影：3px3pxRGBA（1271270.4）；
}
输入{
显示：无；
}
标签{
位置：绝对位置；
显示：内联块；
排名：0；
字体大小：40px；
线高：60px；
颜色：rgba（255、127、127、0.75）；
}
标签：悬停，
标签：悬停~标签{
颜色：rgba（255,0,0,0.75）；
}
.像{
左：10px；
}
.like2{
左：50px；
}
.像{
左：90px；
}
#如1：选中~标签{
动画：heartbeat1 0.8s无限；
}
#如2：选中~标签{
动画：HeartBeat20.8s无限；
}
#如3：选中~标签{
动画：heartbeat3 0.8s无限；
}
@关键帧心跳1{
0% {
变换：比例（.75）；
}
20% {
变换：比例（1）；
}
40% {
变换：比例（.75）；
}
60% {
变换：比例（1）；
}
80% {
变换：比例（.75）；
}
100% {
变换：比例（.75）；
}
}
@关键帧心跳2{
0% {
变换：比例（.75）；
}
20% {
变换：比例（1）；
}
40% {
变换：比例（.75）；
}
60% {
变换：比例（1）；
}
80% {
变换：比例（.75）；
}
100% {
变换：比例（.75）；
}
}
@关键帧心跳3{
0% {
变换：比例（.75）；
}
20% {
变换：比例（1）；
}
40% {
变换：比例（.75）；
}
60% {
变换：比例（1）；
}
80% {
变换：比例（.75）；
}
100% {
变换：比例（.75）；
}
}

♥
♥
♥

每种评级为何不准备3行，例如1颗心、2颗心和3颗心？然后你可以使用复选框来切换它们。嗨@gyre，刚刚在你的链接中尝试了“bouncywrap”技术，但是现在即使没有选中，心脏也会跳动。加上位置：亲戚似乎弄乱了心脏的排列。@Anson，你能详细解释一下吗？说真的吗？那么，你不觉得这是剽窃吗？我确实为此称赞过你。非常欢迎您更新本应提供解决方案的动画。：）非常感谢。你做了一些我不想做的更改，所以我只保留了我缺少的内容，并将其添加到我的原始帖子中。You's welcome@MattEvent-我没有使用完全相同的标记和样式，因为我打算向你展示一种方法，而不是为你“做功课”：这是公平的！非常感谢；）