我希望同步三个不同元素的关键帧动画。
它们基本上是三颗心,我希望它们在点击时跟随心跳动画。
当点击两个或更多时,我希望他们能够"击败"同步中。
您可以查看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">♥</label>
<!-- SECOND HEART -->
<input type="radio" id="heart_2" name="like" value="2" />
<label for="heart_2" class="heart-slider">♥</label>
<!-- FIRST HEART -->
<input type="radio" id="heart_1" name="like" value="1" />
<label for="heart_1" class="heart-slider">♥</label>
</section>
&#13;
实现同步的好方法是什么?
谢谢
修改
按照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;
}
}
答案 0 :(得分: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">♥</label>
<input type="radio" id="like2" name="likes" value="2" />
<label class="like2" for="like2">♥</label>
<input type="radio" id="like1" name="likes" value="1" />
<label class="like1" for="like1">♥</label>
</div>
答案 1 :(得分:1)
修改@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">♥</label>
<input type="radio" id="like2" name="likes" value="2" />
<label class="like2" for="like2">♥</label>
<input type="radio" id="like1" name="likes" value="1" />
<label class="like1" for="like1">♥</label>
</div>