用心做脉搏

Question

我用CSS做了心脏。我只是在寻找一种让它跳动/跳动的方法。

下面是代码（fiddle）：

#heart { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 90px; 
 
} 
 
#heart:before, 
 
#heart:after { 
 
    position: absolute;  
 
    -webkit-animation: heart 1s linear infinite; 
 
    content: ""; 
 
    left: 50px; 
 
    top: 0; 
 
    width: 50px; 
 
    height: 80px; 
 
    background: red; 
 
    -moz-border-radius: 50px 50px 0 0; 
 
    border-radius: 50px 50px 0 0; 
 
    -webkit-transform: rotate(-45deg); 
 
      transform: rotate(-45deg); 
 
    -webkit-transform-origin: 0 100%; 
 
      transform-origin: 0 100%; 
 
} 
 
#heart:after { 
 
    left: 0; 
 
    -webkit-transform: rotate(45deg); 
 
      transform: rotate(45deg); 
 
    -webkit-transform-origin: 100% 100%; 
 
      transform-origin: 100% 100%; 
 
}

<div id="heart"></div>

Answer 1

什么可爱后开始与傍晚。

当然，这是可能的纯CSS - 你可能感兴趣的animations：

CSS

#heart-container { 
    width: 100px; 
    height: 90px; 
    animation: pulsate 0.5s infinite; 
} 

@keyframes pulsate { 
    0% { 
     transform: scale(1); 
    } 
    50% { 
     transform: scale(1.5); 
    } 
    100% { 
     transform: scale(1); 
    } 
} 

Working example on JSFiddle.

只是包装你的可爱的心脏在#heart-container，你是很好去。此外，不要忘记在必要时包含供应商特定的前缀。

FYI，animation速记属性 - 类似于transition - 也接受缓动设置（定时功能），如ease-in-out。或者，使用animation-timing-function。

查看动画宽松example on JSFiddle。

---

注意

大家很奇怪，为什么我建议这种方法，而不是一个交替的动画，这种方法具有协同作用缓和功能相当不错。

Answer 2

的animation财产是你的朋友。 :)

#heart { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 90px; 
 

 
    -webkit-animation: heartbeat .8s ease-in-out 0s infinite; 
 
    -moz-animation: heartbeat .8s ease-in-out 0s infinite; 
 
    animation: heartbeat .8s ease-in-out 0s infinite; 
 
    transform: scale(1); 
 
} 
 

 
@-moz-keyframes heartbeat { 
 
    0% {transform: scale(1);} 
 
    50% {transform: scale(1.5);} 
 
    100% {transform: scale(1);} 
 
} 
 
@-webkit-keyframes heartbeat { 
 
    0% {transform: scale(1);} 
 
    50% {transform: scale(1.5);} 
 
    100% {transform: scale(1);} 
 
} 
 
@keyframes heartbeat { 
 
    0% {transform: scale(1);} 
 
    50% {transform: scale(1.5);} 
 
    100% {transform: scale(1);} 
 
} 
 

 

 
#heart:before, 
 
#heart:after { 
 
    position: absolute; 
 
    content: ""; 
 
    left: 50px; 
 
    top: 0; 
 
    width: 50px; 
 
    height: 80px; 
 
    background: red; 
 
    -moz-border-radius: 50px 50px 0 0; 
 
    border-radius: 50px 50px 0 0; 
 
    -webkit-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    -webkit-transform-origin: 0 100%; 
 
      transform-origin: 0 100%; 
 
} 
 
#heart:after { 
 
    left: 0; 
 
    -webkit-transform: rotate(45deg); 
 
      transform: rotate(45deg); 
 
    -webkit-transform-origin: 100% 100%; 
 
    transform-origin: 100% 100%; 
 
}

<div id = "heart"></div>