Animation CSS Rotating Irregular

rotating_irregular_animation

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {
        top:0px;
        left: 0px;
        
        opacity: 100;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    10%   {
        top:25px;
        left:25px;
        
        opacity: 90;
        -webkit-transform: rotate(36deg);
        -ms-transform: rotate(36deg);
        transform: rotate(36deg);
    }
    20%  {
        top:45px;
        left: 45px;
        
        opacity: 80;
        -webkit-transform: rotate(64deg);
        -ms-transform: rotate(64deg);
        transform: rotate(64deg);
    }
    30%  {
        top:65px;
        left: 65px;
        opacity: 70;
        -webkit-transform: rotate(108deg);
        -ms-transform: rotate(108deg);
        transform: rotate(108deg);
    }
    40%  {
        top:85px;
        left: 85px;
        opacity: 60;
        -webkit-transform: rotate(144deg);
        -ms-transform: rotate(144deg);
        transform: rotate(144deg);
    }
    50% {
        top:105px;
        left: 105px;
        opacity: 50;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    60% {
        top:125px;
        left: 125px;
        opacity: 40;
        -webkit-transform: rotate(216deg);
        -ms-transform: rotate(216deg);
        transform: rotate(216deg);
    }
    70% {
        top:145px;
        left: 145px;
        opacity: 30;
        -webkit-transform: rotate(252deg);
        -ms-transform: rotate(252deg);
        transform: rotate(252deg);
    }
    80% {
        top:165px;
        left: 165px;
        opacity: 20;
        -webkit-transform: rotate(288deg);
        -ms-transform: rotate(288deg);
        transform: rotate(288deg);
    }
    90% {
        top:185px;
        left: 185px;
        opacity: 10;
        -webkit-transform: rotate(324deg);
        -ms-transform: rotate(324deg);
        transform: rotate(324deg);
    }
    100% {
        top:205px;
        left: 205px;
        opacity: 0;
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* Standard syntax */
@keyframes example {
    0%   {
        top:0px;
        left: 0px;
        
        opacity: 100;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    10%   {
        top:25px;
        left:25px;
        
        opacity: 90;
        -webkit-transform: rotate(36deg);
        -ms-transform: rotate(36deg);
        transform: rotate(36deg);
    }
    20%  {
        top:45px;
        left: 45px;
        
        opacity: 80;
        -webkit-transform: rotate(64deg);
        -ms-transform: rotate(64deg);
        transform: rotate(64deg);
    }
    30%  {
        top:65px;
        left: 65px;
        opacity: 70;
        -webkit-transform: rotate(108deg);
        -ms-transform: rotate(108deg);
        transform: rotate(108deg);
    }
    40%  {
        top:85px;
        left: 85px;
        opacity: 60;
        -webkit-transform: rotate(144deg);
        -ms-transform: rotate(144deg);
        transform: rotate(144deg);
    }
    50% {
        top:105px;
        left: 105px;
        opacity: 50;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    60% {
        top:125px;
        left: 125px;
        opacity: 40;
        -webkit-transform: rotate(216deg);
        -ms-transform: rotate(216deg);
        transform: rotate(216deg);
    }
    70% {
        top:145px;
        left: 145px;
        opacity: 30;
        -webkit-transform: rotate(252deg);
        -ms-transform: rotate(252deg);
        transform: rotate(252deg);
    }
    80% {
        top:165px;
        left: 165px;
        opacity: 20;
        -webkit-transform: rotate(288deg);
        -ms-transform: rotate(288deg);
        transform: rotate(288deg);
    }
    90% {
        top:185px;
        left: 185px;
        opacity: 10;
        -webkit-transform: rotate(324deg);
        -ms-transform: rotate(324deg);
        transform: rotate(324deg);
    }
    100% {
        top:205px;
        left: 205px;
        opacity: 0;
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}