CSS анимация привязывается к началу

Question

У меня есть эта анимация сердца, и у меня есть «избиение» довольно изысканное.

http://codepen.io/wesbos/pen/tyqeL

Проблема заключается в том, что она привязывается к началу, где я хочу, чтобы это было непрерывным и гладким. Как я могу это исправить?

Answer 1

У вас последний прыжок, потому что у вас есть 100% установленный до 400px, а затем начинайте с 100px. Попробуйте следующее:

100% { 
    font-size:100px; 
} 

Вы также можете попробовать добавив «альтернативный» для направления анимации, как это:

-webkit-animation:snow 1s linear infinite alternate; 

Надеется, что это помогает.

Answer 2

Первый и заключительный ключевые кадры должны иметь одинаковое значение. Добавить несколько ключевых кадров, так что анимация идеально

CodePen