JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<!doctype html>

<html>

    <head>

        <title>CSS3 Transition hardware-acceleration test</title>

        <style>

        </style>

        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        
        <script>

        </script>
        
    </head>

    <body>
        <input id="hw_toggle" type="checkbox" disabled="false">Use hardware acceleration (Can take a while after clicking so be patient)</input>
        <br>
        <button id="btn_start">Start animation</button><span id="info" style="display: none;"> (Reload page to try again)</span>
        <div id="stage1">
            
        </div>
    </body>

</html>

CSS

body{
                font-family: arial, sans-serif;
                color: #333;
                font-size: 13px;
            }
        
            #stage1{
                width: 300px;
                height: 150px;
                border: 1px solid #ccc;
                position: absolute;
            }
            
            .box{
                width: 5px;
                height: 5px;
                background-color: #2b8bdc;
                position: absolute;
                top: 0;
                transition: all 1s ease-in;
                -webkit-transition: all 1s ease-in;
                -moz-transition: all 1s ease-in;
                -o-transition: all 1s ease-in;
                -ms-transition: all 1s ease-in;
            }
            
            .acc{
                transform: translateZ(0);
                -webkit-transform: translateZ(0);
                -moz-transform: translateZ(0);
                -o-transform: translateZ(0);
                -ms-transform: translateZ(0);
            }

JavaScript

// Random key generator
            function getRandom(min, max) {
                if(min > max) return -1;
                if(min == max) return min;
                var r;
                do r = Math.random();
                while(r == 1.0);
                return min + parseInt(r * (max-min+1));
            }
        
            $(document).ready(function(){

                // Enable or disable hardware-acceleration
                $("#hw_toggle").click(function(){
                    // $(".box").toggleClass("acc");
                    $("#stage1").toggleClass("acc");
                });
            
                // Enable buttons
                $("#hw_toggle, #btn_start").prop("disabled", false);
            
                $("#btn_start").click(function(){
                    // Disable buttons
                    $("#hw_toggle, #btn_start").prop("disabled", true);
                
                    $("#info").css("display", "inline");
                    
                    // Prepare animation
                    var use_hw_acc = $('#hw_toggle').attr('checked');
                    $(".box").each(function(){
                        var box = this;
                        var rand = getRandom(0, 5000); // Don't let all boxes start at the same time
                        setTimeout(function(){
                            // Start animation for the current box
                            $(box).css({
                                "top": "145px"
                            });
                        }, rand);
                    });
                });
            
                // Init mini boxes
                var max = 4000;
                var w = 300;
                for (var i=0; i<max; i++){
                    var left = i;
                    if (left>w-5){
                        left = left % (w-5);
                    }
                    $('#stage1').append('<div class="box" style="left: ' + left +'px;"></div>');
              ...