css 同步关键帧动画

Question

我希望同步三个不同元素的关键帧动画。

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

单击两个或多个时，我希望它们 "beat" 同步。

你可以查看一个JSbin here

到目前为止我所拥有的是：

.rating {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 140px;
  height: 50px;
  padding: 5px 10px;
  margin: auto;
  border-radius: 30px;
  background: #FFF;
  display: block;
  overflow: hidden;
  unicode-bidi: bidi-override;
  direction: rtl;
}

.rating:not(:checked)>input {
  display: none;
}


/* - - - - - LIKE */

#like {
  bottom: -65px;
}

#like:not(:checked)>label {
  cursor: pointer;
  float: right;
  width: 30px;
  height: 30px;
  display: block;
  margin-right: 7.5px;
  color: rgba(233, 54, 40, .4);
  line-height: 42px;
  text-align: center;
  transition: color 0.2s;
}

#like:not(:checked)>label:hover,
#like:not(:checked)>label:hover~label {
  color: rgba(233, 54, 40, .6);
}

#like>input:checked+label:hover,
#like>input:checked+label:hover~label,
#like>input:checked~label:hover,
#like>input:checked~label:hover~label,
#like>label:hover~input:checked~label {
  color: rgb(233, 54, 40);
}

#like>input:checked~label {
  color: rgb(233, 54, 40);
  animation: 1s heartbeat infinite;
}

@keyframes heartbeat {
  from {
    transform: scale(1);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }
  10% {
    transform: scale(1.2);
    animation-timing-function: ease-in;
  }
  15% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  25% {
    transform: scale(1.15);
    animation-timing-function: ease-in;
  }
  35% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
}

<section id="like" class="rating">

  <!-- THIRD HEART -->
  <input type="radio" id="heart_3" name="like" value="3" />
  <label for="heart_3" class="heart-slider">&#9829;</label>

  <!-- SECOND HEART -->
  <input type="radio" id="heart_2" name="like" value="2" />
  <label for="heart_2" class="heart-slider">&#9829;</label>

  <!-- FIRST HEART -->
  <input type="radio" id="heart_1" name="like" value="1" />
  <label for="heart_1" class="heart-slider">&#9829;</label>

</section>

实现同步的好方法是什么？

谢谢

编辑

根据 Rounin 的回答，这是完成工作的更新 CSS：

#like {
}
#like:not(:checked) > label {
  cursor:pointer;
  float: right;
  width: 30px;
  height: 30px;
  display: inline-block;

  color: (255, 255, 255);

  transition: color 0.2s;
}

#like:not(:checked) > label:hover,
#like:not(:checked) > label:hover ~ label {
  color: rgba(252, 108, 133, 1);
}
#like > input:checked + label:hover,
#like > input:checked + label:hover ~ label,
#like > input:checked ~ label:hover,
#like > input:checked ~ label:hover ~ label,
#like > label:hover ~ input:checked ~ label {
 color: rgb(252, 108, 133);

}
#like > input:checked ~ label {
  color: rgb(252, 108, 133);

}

#heart_1:checked ~ label {
animation: heartbeat1 1s infinite;
}

#heart_2:checked ~ label {
animation: heartbeat2 1s infinite;
}

#heart_3:checked ~ label {
animation: heartbeat3 1s infinite;
}


@keyframes heartbeat1 {
  from {
    transform: scale(1);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }
  10% {
    transform: scale(1.2);
    animation-timing-function: ease-in;
  }
  15% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  25% {
    transform: scale(1.15);
    animation-timing-function: ease-in;
  }
  35% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
}

@keyframes heartbeat2 {
  from {
    transform: scale(1);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }
  10% {
    transform: scale(1.2);
    animation-timing-function: ease-in;
  }
  15% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  25% {
    transform: scale(1.15);
    animation-timing-function: ease-in;
  }
  35% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
}

@keyframes heartbeat3 {
  from {
    transform: scale(1);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }
  10% {
    transform: scale(1.2);
    animation-timing-function: ease-in;
  }
  15% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  25% {
    transform: scale(1.15);
    animation-timing-function: ease-in;
  }
  35% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
}

Answer 1

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

工作示例：

div {
display: block;
position: relative;
width: 125px;
height: 60px;
box-shadow: 3px 3px 3px rgba(127, 127, 127, 0.4);
}

input {
display: none;
}

label {
position: absolute;
display: inline-block;
top: 0;
font-size: 40px;
line-height: 60px;
color: rgba(255, 127, 127, 0.75);
}


label:hover,
label:hover ~ label {
color: rgba(255, 0, 0, 0.75);
}

.like1 {
left: 10px;
}

.like2 {
left: 50px;
}

.like3 {
left: 90px;
}

#like1:checked ~ label {
animation: heartbeat1 0.8s infinite;
}

#like2:checked ~ label {
animation: heartbeat2 0.8s infinite;
}

#like3:checked ~ label {
animation: heartbeat3 0.8s infinite;
}

@keyframes heartbeat1 {
  0% {
    color: rgba(255, 0, 0, 0.5);
  }

  50% {
    color: rgba(255, 0, 0, 1);
  }
}

@keyframes heartbeat2 {
  0% {
    color: rgba(255, 0, 0, 0.5);
  }

  50% {
    color: rgba(255, 0, 0, 1);
  }
}

@keyframes heartbeat3 {
  0% {
    color: rgba(255, 0, 0, 0.5);
  }

  50% {
    color: rgba(255, 0, 0, 1);
  }
}

<div>
<input type="radio" id="like3" name="likes" value="3" />
<label class="like3" for="like3">&#9829;</label>

<input type="radio" id="like2" name="likes" value="2" />
<label class="like2" for="like2">&#9829;</label>

<input type="radio" id="like1" name="likes" value="1" />
<label class="like1" for="like1">&#9829;</label>
</div>

Answer 2

修改了@Rounin 的回答以提供您需要的输出。

div {
  display: block;
  position: relative;
  width: 125px;
  height: 60px;
  box-shadow: 3px 3px 3px rgba(127, 127, 127, 0.4);
}

input {
  display: none;
}

label {
  position: absolute;
  display: inline-block;
  top: 0;
  font-size: 40px;
  line-height: 60px;
  color: rgba(255, 127, 127, 0.75);
}

label:hover,
label:hover~label {
  color: rgba(255, 0, 0, 0.75);
}

.like1 {
  left: 10px;
}

.like2 {
  left: 50px;
}

.like3 {
  left: 90px;
}

#like1:checked~label {
  animation: heartbeat1 0.8s infinite;
}

#like2:checked~label {
  animation: heartbeat2 0.8s infinite;
}

#like3:checked~label {
  animation: heartbeat3 0.8s infinite;
}

@keyframes heartbeat1 {
  0% {
    transform: scale( .75);
  }
  20% {
    transform: scale( 1);
  }
  40% {
    transform: scale( .75);
  }
  60% {
    transform: scale( 1);
  }
  80% {
    transform: scale( .75);
  }
  100% {
    transform: scale( .75);
  }
}

@keyframes heartbeat2 {
  0% {
    transform: scale( .75);
  }
  20% {
    transform: scale( 1);
  }
  40% {
    transform: scale( .75);
  }
  60% {
    transform: scale( 1);
  }
  80% {
    transform: scale( .75);
  }
  100% {
    transform: scale( .75);
  }
}

@keyframes heartbeat3 {
  0% {
    transform: scale( .75);
  }
  20% {
    transform: scale( 1);
  }
  40% {
    transform: scale( .75);
  }
  60% {
    transform: scale( 1);
  }
  80% {
    transform: scale( .75);
  }
  100% {
    transform: scale( .75);
  }
}

<div>
  <input type="radio" id="like3" name="likes" value="3" />
  <label class="like3" for="like3">&#9829;</label>

  <input type="radio" id="like2" name="likes" value="2" />
  <label class="like2" for="like2">&#9829;</label>

  <input type="radio" id="like1" name="likes" value="1" />
  <label class="like1" for="like1">&#9829;</label>
</div>

css 同步关键帧动画

css Synchronise keyframe animations

html

javascript

css

jquery

keyframe