CSS如何做到心跳的动画

html-css012

CSS如何做到心跳的动画,第1张

.heart {

  color: #EB5E28

  animation: heathing 1s ease infinite

}

@keyframes heathing {

  0% {

    transform: scale(0.75)

  }

  20% {

    transform: scale(1)

  }

  40% {

    transform: scale(0.75)

  }

  60% {

    transform: scale(1)

  }

  80% {

    transform: scale(0.75)

  }

  100% {

    transform: scale(0.75)

  }

}

假定这个元素id=heart,则答案如此。

创建动画序列,需要使用animation属性或其子属性,该属性允许配置动画时间、时长以及其他动画细节,但该属性不能配置动画的实际表现,动画的实际表现是由 @keyframes规则实现,具体情况参见使用keyframes定义动画序列小节部分。

transition也可实现动画。transition强调过渡,是元素的一个或多个属性发生变化时产生的过渡效果,同一个元素通过两个不同的途径获取样式,而第二个途径当某种改变发生(如hover)时才能获取样式,这样就会产生过渡动画。