Pure CSS Tumble Animation

This animation is pure CSS and requires no JavaScript

             
        #animated_div {
            width: 70px;
            height: 47px;
            background: #92B901;
            color: #ffffff;
            position: relative;
            font-weight: bold;
            font-size: 30px;
            padding: 10px;
            animation: animated_div 5s 1;
            -moz-animation: animated_div 5s 1;
            -webkit-animation: animated_div 5s 1;
            -o-animation: animated_div 5s 1;
            border-radius: 5px;
            -webkit-border-radius: 5px;
        }

        @keyframes animated_div {
            0% {
                transform: rotate(0deg);
                left: 0px;
            }

            25% {
                transform: rotate(20deg);
                left: 0px;
            }

            50% {
                transform: rotate(0deg);
                left: 500px;
            }

            55% {
                transform: rotate(0deg);
                left: 500px;
            }

            70% {
                transform: rotate(0deg);
                left: 500px;
                background: #1ec7e6;
            }

            100% {
                transform: rotate(-360deg);
                left: 0px;
            }
        }

        @-webkit-keyframes animated_div {
            0% {
                -webkit-transform: rotate(0deg);
                left: 0px;
            }

            25% {
                -webkit-transform: rotate(20deg);
                left: 0px;
            }

            50% {
                -webkit-transform: rotate(0deg);
                left: 500px;
            }

            55% {
                -webkit-transform: rotate(0deg);
                left: 500px;
            }

            70% {
                -webkit-transform: rotate(0deg);
                left: 500px;
                background: #1ec7e6;
            }

            100% {
                -webkit-transform: rotate(-360deg);
                left: 0px;
            }
        }

        @-moz-keyframes animated_div {
            0% {
                -moz-transform: rotate(0deg);
                left: 0px;
            }

            25% {
                -moz-transform: rotate(20deg);
                left: 0px;
            }

            50% {
                -moz-transform: rotate(0deg);
                left: 500px;
            }

            55% {
                -moz-transform: rotate(0deg);
                left: 500px;
            }

            70% {
                -moz-transform: rotate(0deg);
                left: 500px;
                background: #1ec7e6;
            }

            100% {
                -moz-transform: rotate(-360deg);
                left: 0px;
            }
        }

        @-o-keyframes animated_div {
            0% {
                transform: rotate(0deg);
                left: 0px;
            }

            25% {
                transform: rotate(20deg);
                left: 0px;
            }

            50% {
                transform: rotate(0deg);
                left: 500px;
            }

            55% {
                transform: rotate(0deg);
                left: 500px;
            }

            70% {
                transform: rotate(0deg);
                left: 500px;
                background: #1ec7e6;
            }

            100% {
                transform: rotate(-360deg);
                left: 0px;
            }
        }