@-webkit-keyframes support

[rutgerrrrr]

Browser: ios mobile safari/chrome for ios

The generated css to animate the svg doesn't include crossbrowser support. '@-webkit-keyframes classname {' should be added as well as the '-moz-', '-o-' and '-webkit-' prefixes to the animation tags.

[ibmua]

I don't think it makes much sense to add -o- nowadays and you quoted -webkit- twice =)

[maxwellito]

@adaringdesign you mark a point. Ill try to update the code to provide this option. However, from the info of caniuse.com, I think only -webkit- would make sense. -moz- refer to a way too old version of Firefox, and -o- doesn't seems to exist for CSS animations on Opera.

[rutgerrrrr]

@maxwellito fair enough. It was more of a quick note/writedown, hence the double '-webkit' and the '-o'. I came across this with my iPhone which is still on iOS 8.1.2 (jailbreak stuff etc). I couldn't get it to work without the '-webkit' addition.

I know it should only affect relatively old browsers, could this be implemented as an option so users can choose to enable it?

Here's my implementation: https://www.adaringdesign.nl/ `

<path class="st0 CrkLJSGh_0" d="M-271.3,475.7c0.7,0,1.4,0,2.1,0h0.6c1,0,1.9-0.2,2.9-0.5l0.7-0.2c0.4-0.1,0.8-0.3,1.2-0.6 c0.4-0.3,0.7-0.5,1.1-0.8l0.2-0.1c0.5-0.4,0.9-0.7,1.3-1.1l7.5-7c1-0.9,1.9-1.8,2.9-2.7s1.8-1.9,2.5-3v-0.1c0.7-1.1,1.2-2.4,1.4-3.7 v-0.1c0.2-1.4,0.4-2.8,0.5-4.3l1.7-15.1l2.1-8.4l-5.5-2.7l1.4-12.4l-11.2,4.5l2-14.9l-10.5,11.4l-4.8-14.7l-4.8,14.7l-10.5-11.4 l2,14.9l-14.6-4.5l4.8,12.4l-5.7,2.7l2.1,8.4l1.7,15.1c0.2,1.4,0.3,2.8,0.5,4.3v0.1c0.2,1.3,0.7,2.6,1.4,3.7v0.1 c0.7,1.1,1.6,2.1,2.5,3c1,0.9,1.9,1.8,2.9,2.7l7.5,7c0.4,0.4,0.9,0.8,1.3,1.1l0.2,0.1c0.4,0.3,0.7,0.6,1.1,0.8 c0.4,0.3,0.8,0.5,1.2,0.6l0.7,0.2c0.9,0.3,1.9,0.4,2.9,0.5h0.6C-272.7,475.7-272,475.7-271.3,475.7"></path>
<path class="st1 CrkLJSGh_1" d="M-271.3,458.8c-0.1,0-0.1,0-0.2,0h-0.1c-0.1,0-0.1,0-0.2,0c-0.1,0-0.2,0-0.3,0s-0.2,0-0.3,0h-0.5 c-0.4,0-0.8,0-1.2,0c-0.2,0-0.4,0-0.6,0l-1.8,0.2c-0.4,0-0.8,0.1-1.1,0.3c-0.3,0.1-0.6,0.3-0.9,0.6c-0.2,0.2-0.4,0.6-0.5,0.9 l-0.6,2.4c-0.2,0.5-0.3,1-0.5,1.5l-0.3,1.2c-0.1,0.2-0.2,0.4-0.3,0.6c-0.2,0.2-0.4,0.2-0.6,0.2h-0.2c-0.3-0.1-0.7-0.2-1-0.5 l-4.9-4.1c-1.1-0.9-2.1-1.9-3-3l-1-1.2c-0.4-0.5-0.7-1-0.9-1.6c-0.2-0.6-0.3-1.2-0.4-1.8l-1.8-15.4c1,1.3,2.1,2.2,2.9,2.8 c-0.9-3-1.6-7.5-1-9.9c0.6,3.5,4.8,11.2,4.8,11.2c-0.5-4.3,2.6-10.5,2.6-10.5c0,4.7,5.1,10.6,5.1,10.6c-0.8-3.5,2.1-9.7,2.1-9.7 c4.1,7.4,10.6,10.6,10.6,10.6c-4-3.9-2.6-12.2-2.6-12.2c1,1,1.5,8.3,1.5,8.3c2.1-2.1,2.5-7.7,2.5-7.7c6.7,5.4,10.3,13.1,10.3,13.1 c-0.8-8.7-4.2-16.2-4.2-16.2s6.9,6.5,8.5,9.4c0,0,0.8-7.4-0.7-11.4c1.1,1.9,2.9,6.1,2.1,13.6c0.6-0.3,1.3-1,2-2.1l-1.7,15.5 c-0.1,0.6-0.2,1.2-0.4,1.8c-0.2,0.6-0.5,1.1-0.9,1.6l-1,1.2c-0.9,1.1-1.9,2.1-3,3l-4.9,4.1c-0.3,0.2-0.6,0.4-1,0.5h-0.2 c-0.2,0-0.4,0-0.6-0.2c-0.2-0.2-0.3-0.4-0.3-0.6l-0.3-1.2c-0.1-0.5-0.3-1-0.5-1.5l-0.8-2.4c-0.1-0.3-0.3-0.6-0.5-0.9 c-0.3-0.3-0.6-0.5-0.9-0.6c-0.3-0.2-0.7-0.3-1.1-0.3l-1.8-0.2c-0.2,0-0.4,0-0.6,0c-0.4,0-0.8,0-1.2,0h-0.5c-0.1,0-0.2,0-0.3,0 s-0.2,0-0.3,0h-0.1h-0.1C-271.1,458.8-271.2,458.8-271.3,458.8"></path>
<style>
    .CrkLJSGh_0 {
        stroke-dasharray: 281 283;
        stroke-dashoffset: 282;
    }

    .start .CrkLJSGh_0 {
        animation: CrkLJSGh_draw 2000ms linear 0ms forwards;
        -moz-animation: CrkLJSGh_draw 2000ms linear 0ms forwards;
        -webkit-animation: CrkLJSGh_draw 2000ms linear 0ms forwards;
        -o-animation: CrkLJSGh_draw 2000ms linear 0ms forwards;
    }

    .CrkLJSGh_1 {
        stroke-dasharray: 275 277;
        stroke-dashoffset: 276;
    }

    .start .CrkLJSGh_1 {
        animation: CrkLJSGh_draw 2000ms linear 0ms forwards;
        -moz-animation: CrkLJSGh_draw 2000ms linear 0ms forwards;
        -webkit-animation: CrkLJSGh_draw 2000ms linear 0ms forwards;
        -o-animation: CrkLJSGh_draw 2000ms linear 0ms forwards;
    }

    @keyframes CrkLJSGh_draw {
        100% {
            stroke-dashoffset: 0;
        }
    }

    @-webkit-keyframes CrkLJSGh_draw {
        100% {
            stroke-dashoffset: 0;
        }
    }

</style>

`