文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >css同步关键帧动画

问css同步关键帧动画
EN

Stack Overflow用户
提问于 2017-03-22 08:52:21
回答 2查看 2K关注 0票数 2

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

他们基本上是三个心脏，我希望他们跟随心跳动画时，他们被点击。

当单击两个或两个以上时，我希望它们同步“拍打”。

您可以检查JSbin 这里

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

​

代码语言：javascript
复制
.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;
  }
}
代码语言：javascript
复制
<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：

代码语言：javascript
复制
#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;
  }
}
keyframe
javascript
jquery
html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-03-22 11:52:44

您可以设置3个相同的动画和样式您的输入和标签，这样当一个新的单选按钮被选中，旧的动画停止和新的开始。这样，心脏就永远保持同步：

工作示例：

​

代码语言：javascript
复制
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);
  }
}
代码语言：javascript
复制
<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>

​

票数 2
EN

Stack Overflow用户

发布于 2017-03-22 12:16:44

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

​

代码语言：javascript
复制
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);
  }
}
代码语言：javascript
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/42946700

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档