text-strokeをアニメーションさせる

DEMO

See the Pen TOMATO #1 by kimmy (@kimmy) on CodePen.

HTML

<p id="txt">冷やしトマト</p>

CSS

@charset "UTF-8";
#txt {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 800px;
  height: 80px;
  color: #000;
  font: 80px helvetica, arial, "hiragino kaku gothic pro", meiryo, "ms pgothic", sans-serif;
  font-weight: bold;
  letter-spacing: .5em;
  line-height: 60px;
  text-align: center;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-text-stroke: 50px #000;
}
#txt:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  content: "冷やしトマト";
  -webkit-text-stroke: 0 transparent !important;
}

JavaScript

'use strict';
$(function () {
    'use strict';
    var $txt = $('#txt'), anim = function anim() {
            $({ storoke: 50 }).animate({ storoke: 10 }, {
                duration: 600,
                easing: 'easeInBounce',
                step: function step(stroke) {
                    $txt[0].style.cssText += ';-webkit-text-stroke:' + (stroke | 0) + 'px #B71C1C';
                }
            }).animate({ storoke: 50 }, {
                duration: 400,
                easing: 'easeInBounce',
                step: function step(stroke) {
                    $txt[0].style.cssText += ';-webkit-text-stroke:' + (stroke | 0) + 'px #B71C1C';
                },
                complete: anim
            });
        };
    anim();
});