2
私は3つの異なる要素のキーフレームアニメーションを同期させたいと考えています。cssキーフレームアニメーションの同期
これらは基本的に3つのハートで、クリックするとハートビートアニメーションに従います。
2つ以上がクリックされたときに、それらを同期させて「ビート」します。
.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>同期を達成するための良い方法は何ですか：
あなたは、私がこれまで持っていることであるJSbin here
を確認することができますか？
は浪人の答えに続き
EDIT
が、ここで仕事を取得し、更新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