Can i convert HTML+CSS animation to .gif extension?

问题

I have a sample loader from my web, but the loader is made with HTML + CSS animation, and I want to convert the web loader to gif, so I can use the loader to my mobile apps.

Here is the link: https://jsfiddle.net/6uedrb89/

Here's the demo:

.se-pre-con {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: transparent;
    }
    .se-pre-con > img {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -25px 0 0 -25px;
    }

    .se-pre-con #loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
    }

    .se-pre-con #loader {
        display: block;
        position: relative;
        left: 50%;
        top: 50%;
        width: 120px;
        height: 120px;
        margin: -60px 0 0 -60px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #3b57e0;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }

    .se-pre-con #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #8B0000;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite;
    }

    .se-pre-con #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #3b650a;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
    }

    @-webkit-keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

<html>
    <head>
    </head>
    <body>
        <div class="se-pre-con">
                <img src="https://www.google.co.id/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" width="51">
                <div id="loader-wrapper">
                    <div id="loader">
                    </div>
                </div>
            </div>
    </body>
    </html>

I have tried to use Html52gifConverter

but I can't get the clean loop.

来源：https://stackoverflow.com/questions/51550758/can-i-convert-htmlcss-animation-to-gif-extension

标签

html

css

gif

loader