CSS Heart beating

We can make a heart with just css even having the only div.

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

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

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

The most tricky part is to draw a heart. Luckily, it is pretty simple - it can be composed of 3 shapes - square and 2 circles. Square will be described with main css class, and 2 circles with ::before and ::after pseudo classes

And beating will be implemented with css @keyframe animation

Now let's have a look at the whole css.

  
:root{
  --width: 80px;
  --color: rgb(255, 51, 0);
}


#heart{
  width: var(--width);
  height: var(--width);
  margin-left: 40px;
  background: var(--color);
  background-image: var(--color_gradient);
  border-color: transparent;
  border-style: solid;
  border-width: 0px;
  transform: rotate(45deg);
  animation-name: heartbeat;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

#heart::before{
  content: "";
  width: var(--width);
  height: var(--width);
  position: absolute;
  transform: translateX(-50%);
  background: var(--color);
  background-image: var(--color_gradient);
  border-color: transparent;
  border-style: solid;
  border-width: 0px;
  border-radius: 50%;
}

#heart::after{
  content: "";
  width: var(--width);
  height: var(--width);
  position: absolute;
  transform: translateY(-50%);
  background: var(--color);
  background-image: var(--color_gradient);
  border-color: transparent;
  border-style: solid;
  border-width: 0px;
  border-radius: 50%;
}


@keyframes heartbeat{
  0% {transform: scale(1.0) rotate(45deg);}
  20% {transform: scale(1.1) rotate(45deg);}
  100% {transform: scale(1.0) rotate(45deg);}

1. :root{
2. --width: 80px;
3. --color: rgb(255, 51, 0);
4. }
7. #heart{
8. width: var(--width);
9. height: var(--width);
10. margin-left: 40px;
11. background: var(--color);
12. background-image: var(--color_gradient);
13. border-color: transparent;
14. border-style: solid;
15. border-width: 0px;
16. transform: rotate(45deg);
17. animation-name: heartbeat;
18. animation-duration: 1s;
19. animation-iteration-count: infinite;
20. }
22. #heart::before{
23. content: "";
24. width: var(--width);
25. height: var(--width);
26. position: absolute;
27. transform: translateX(-50%);
28. background: var(--color);
29. background-image: var(--color_gradient);
30. border-color: transparent;
31. border-style: solid;
32. border-width: 0px;
33. border-radius: 50%;
34. }
36. #heart::after{
37. content: "";
38. width: var(--width);
39. height: var(--width);
40. position: absolute;
41. transform: translateY(-50%);
42. background: var(--color);
43. background-image: var(--color_gradient);
44. border-color: transparent;
45. border-style: solid;
46. border-width: 0px;
47. border-radius: 50%;
48. }
51. @keyframes heartbeat{
52. 0% {transform: scale(1.0) rotate(45deg);}
53. 20% {transform: scale(1.1) rotate(45deg);}
54. 100% {transform: scale(1.0) rotate(45deg);}

:root{
  --width: 80px;
  --color: rgb(255, 51, 0);
}


#heart{
  width: var(--width);
  height: var(--width);
  margin-left: 40px;
  background: var(--color);
  background-image: var(--color_gradient);
  border-color: transparent;
  border-style: solid;
  border-width: 0px;
  transform: rotate(45deg);
  animation-name: heartbeat;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

#heart::before{
  content: "";
  width: var(--width);
  height: var(--width);
  position: absolute;
  transform: translateX(-50%);
  background: var(--color);
  background-image: var(--color_gradient);
  border-color: transparent;
  border-style: solid;
  border-width: 0px;
  border-radius: 50%;
}

#heart::after{
  content: "";
  width: var(--width);
  height: var(--width);
  position: absolute;
  transform: translateY(-50%);
  background: var(--color);
  background-image: var(--color_gradient);
  border-color: transparent;
  border-style: solid;
  border-width: 0px;
  border-radius: 50%;
}


@keyframes heartbeat{
  0% {transform: scale(1.0) rotate(45deg);}
  20% {transform: scale(1.1) rotate(45deg);}
  100% {transform: scale(1.0) rotate(45deg);}

You can try it on JSFiddler:
http://jsfiddle.net/AndrewBuntsev/r0hw9s6u/