Animations are made in CSS with the
@keyframes directive. You’ve seen directives before;
@keyframes directive accepts a name and a block.
The block accepts any number of percentages which represent the stages of the animation across time.
The percentage blocks accept properties and values to change on the element being animated.
@keyframes defined one can use the animation.
.heart element is given two animation properties. One to state what
@keyframe to use and another to state the length of the animation.
Short hand can be used too.
There are a number of other useful animation properties that can be used. I highly suggest using this excellent article from Thoughtbots.