Deferred Tester

by grippstick

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.silver.min.css">
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<p>
    <button id='btnKill'>kill 'em all for 2 sec</button>
</p>
<div class="spin"></div>
<div class="walkabout-old-school"></div>
<div class="walkabout-new-school"></div>
<div class="spin"></div>
<div class="walkabout-old-school"></div>
<div class="walkabout-new-school"></div>
<div class="spin"></div>
<div class="walkabout-old-school"></div>
<div class="walkabout-new-school"></div>
<div class="spin"></div>
<div class="walkabout-old-school"></div>
<div class="walkabout-new-school"></div>
<div class="spin"></div>
<div class="walkabout-old-school"></div>
<div class="walkabout-new-school"></div>
<div class="spin"></div>
<div class="walkabout-old-school"></div>
<div class="walkabout-new-school"></div>
<div class="spin"></div>
<div class="walkabout-old-school"></div>
<div class="walkabout-new-school"></div>
<div class="spin"></div>
<div class="walkabout-old-school"></div>
<div class="walkabout-new-school"></div>
<div class="spin"></div>
<div class="walkabout-old-school"></div>
<div class="walkabout-new-school"></div>
<div class="spin"></div>
<div class="walkabout-old-school"></div>
<div class="walkabout-new-school"></div>
<div class="spin"></div>
<div class="walkabout-old-school"></div>
<div class="walkabout-new-school"></div>
<div class="spin"></div>
<div class="walkabout-old-school"></div>
<div class="walkabout-new-school"></div>
<div class="spin"></div>
<div class="walkabout-old-school"></div>
<div class="walkabout-new-school"></div>
<div class="spin"></div>
<div class="walkabout-old-school"></div>
<div class="walkabout-new-school"></div>
<div class="spin"></div>
<div class="walkabout-old-school"></div>
<div...

CSS

.spin {
    -webkit-animation: 3s rotate linear infinite;
    animation: 3s rotate linear infinite;
    background: red;
}
.walkabout-old-school {
    -webkit-animation: 3s slide-margin linear infinite;
    animation: 3s slide-margin linear infinite;
    background: blue;
}
.walkabout-new-school {
    -webkit-animation: 3s slide-transform linear infinite;
    animation: 3s slide-transform linear infinite;
    background: green;
}
/* keyframes */
 @keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes slide-transform {
    from {
        transform: translatex(0);
    }
    50% {
        transform: translatex(300px);
    }
    to {
        transform: translatex(0);
    }
}
@keyframes slide-margin {
    from {
        margin-left: 0;
    }
    50% {
        margin-left: 100%;
    }
    to {
        margin-left: 0;
    }
}
/* same keyframes, prefixed */
 @-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes slide-transform {
    from {
        -webkit-transform: translatex(0);
    }
    50% {
        -webkit-transform: translatex(300px);
    }
    to {
        -webkit-transform: translatex(0);
    }
}
@-webkit-keyframes slide-margin {
    from {
        margin-left: 0;
    }
    50% {
        margin-left: 100%;
    }
    to {
        margin-left: 0;
    }
}
div {
    width: 30px;
    height: 30px;
}

JavaScript

function kill() {
    var start = +new Date;
    console.log("" + new Date());
    while (+new Date - start < 2000) {}
    console.log("" + new Date());
}

$('#btnKill').click(kill);