2
我正在尋找同步三個不同元素的關鍵幀動畫。css同步關鍵幀動畫
它們基本上是三顆心，我希望它們在點擊時遵循心跳動畫。
當兩個或更多的點擊時，我希望他們「同步」擊敗。
可以檢查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>什麼是實現同步的好辦法嗎？
謝謝
編輯
繼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;
}
}
的可能的複製[如何同步CSS動畫跨越多個元素？]（http://stackoverflow.com/questions/4838972/how-to-sync-css-animations-across多元素） – gyre
你爲什麼不準備3種評分，例如1顆心，2顆心和3顆心？然後你可以使用複選框切換它們。 – Anson
嗨@gyre，剛剛嘗試從您的鏈接「bouncywrap」技術，但即使沒有檢查，現在的心都在碰撞。再加上這個位置：親戚似乎已經弄亂了心靈的平庸。 – mattvent