Нужна помощь в расширении фигуры

Итак, вам может быть лучше использовать изображение, а не форму css. Поскольку границы формы не являются текучими, вам будет трудно растягивать и уменьшать форму, чтобы создать пульсирующий эффект. Если вы используете изображение, все, что вам нужно сделать, это анимировать размер контейнера div и вам хорошо идти.

Делать это один раз легко, но поскольку я предполагаю, что вы хотите, чтобы он пульсировал постоянно, нам нужно сделать анимацию в цикле. Используя jQuery, что-то вроде этого будет хорошо работать:

JQuery

function animatethis(targetElement, speed) {
    $(targetElement).animate({ width: "+=100px"},
    {
        duration: speed,
        complete: function ()
        {
            targetElement.animate({ width: "-=100px" },
            {
                duration: speed,
                complete: function ()
                {
                    animatethis(targetElement, speed);
                }
            });
        }
    });
};

animatethis($('#heart'), 2000);

HTML

<div>
    <img src="..." id="heart" />
</div>

CSS

#heart {
    position: relative;
    width: 150px;
}

И вот скрипка: http://jsfiddle.net/xffLZ/2/

Чтобы изменить размер, вам нужно отрегулировать два значения width в jQuery и, чтобы изменить скорость его пульсации, измените значение числа в animatethis($('#heart'), 2000);

ОБНОВИТЬ

Хорошо, поэтому у меня есть обновленный ответ для вас... Я написал сценарий, используя jQuery и jQueryUI, которые будут пульсировать некоторые сердечные образы, как в примере gif, который вы предоставили. Вот обновленная скрипка с тем, что у меня есть до сих пор: http://jsfiddle.net/t9mZZ/3/

Обратите внимание, что это использует как jQuery, так и jQueryUI, поэтому вы будете включать две библиотеки, и, честно говоря, gif может быть легче. Но, если вы чертовски настроены на то, чтобы это произошло без gif, это должно сработать.

HTML

<div id="container">
    <img id="heart1" src="..." />
    <img id="heart2" src="..." />
<div>

CSS

#container {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
}
img{
    width:250px;
    display:none;
    position: absolute;
    left: -75px;
    top: -50px;
}

JQuery

function animatethis(target1, target2) {
    $(target1).show('scale', function () {
        $(target1).css('z-index','0');
        $(target2).css('z-index','1');
        $(target2).show('scale', function () {
            $(target1).css('z-index','1');
            $(target2).css('z-index','0');
            animatethis(target1, target2);
        });
    });
            };

animatethis($('#heart1'), $('#heart2'));