Эффект биения сердца на чистом CSS3

Как «нарисовать» хорошо всем знакомый символ сердца с помощью css3, показал на примере в одной из своих статей: «Рисуем сердце с помощью CSS3».
Сегодня хочу показать, как можно оживить это сердечко, добавив визуальный эффект биения. Для этого нам понадобится чуточку магии свойств CSS3 и несколько строк несложного кода. Анимация CSS при правильном её использовании порой вообще творит чудеса, это лишь один из самых простейших примеров её применения.
Подробно раскладывать весь фарш на составляющие не буду, вся база практически такая же, как в первом варианте, ну, а с анимацией будет нетрудно разобраться взглянув на исходники.
 

 
Сразу хочу предупредить, что сердечко смотрится во всей красе только на светлом фоне, тёмный фон выдаёт контуры наложения, что конечно же не есть хорошо, так что рисуем на светлом «холсте».

Смотрите пример, копайте исходники в онлайн-редакторе и если понравится, смело забирайте, может где и пригодится.
 

 
Как вы понимаете div-контейнер demo вам не нужен, использовал его только для примера, дабы разместить сердце строго по центру. Вам понадобится вот такая небольшая html-конструкция, для вывода сердечка на странице:
 

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

 
На этом всё!

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях: