html 心跳动画,[CSS3]心跳动画

先来看演示

代码不复杂

#heartbeat svg{

-webkit-animation:heartbeat ease-in-out 0.8s infinite alternate;

-ms-animation:heartbeat ease-in-out 0.8s infinite alternate;

animation:heartbeat ease-in-out 0.8s infinite alternate;

display:inline-block

}

@-webkit-keyframes heartbeat{0%{-webkit-transform:scale(0.9)}9%{-webkit-transform:scale(1.2)}18%{-webkit-transform:scale(0.9)}25%{-webkit-transform:scale(1)}100%{-webkit-transform:scale(1)}}

@-ms-keyframes heartbeat{0%{-ms-transform:scale(0.9)}9%{-ms-transform:scale(1.2)}18%{-ms-transform:scale(0.9)}25%{-ms-transform:scale(1)}100%{-ms-transform:scale(1)}

}

@keyframes heartbeat{0%{transform:scale(0.9)}9%{transform:scale(1.2)}18%{transform:scale(0.9)}25%{transform:scale(1)}100%{transform:scale(1)}

}