Yesterday Sara Soueidan published a very interesting article on CSS shapes and animations. Many users of WebKit-based browsers reported that in some cases their browser crashed while displaying the examples.
I investigated this strange behavior by creating a minimal test case simply changing percentage values with fixed values. Apparently, browsers such as Safari may have problems with percentages values when applied to paths.
This is not unusual: older versions of Safari Mobile showed a similar bug with the border-radius property and percentage values (borders were rendered squared). In this case, however, Safari crashed but without closing the current window.
Oddly enough, when you reload the example again the problem disappears. Today I've tested the example again with percentages and apparently Safari rendered it without problems, though the general appearance of the animation was not so fluid (Chrome renders it faster but Chrome uses Blink, not WebKit).
Further, nothing has been reported yet in the official Bugzilla of WebKit. Since Sara's examples are hosted on CodePen, it's difficult to tell whether this is a bug or not.
This odd behavior appears randomly and the only solution to prevent it from happening is to use fixed lengths instead of percentages.
Updates
January 16, 2014
Filed this problem as a bug on the official WebKit's Bugzilla. Added a crash report from Safari 7.0.1 (Mac OS X 10.9.1).