examples/cdn.md
<!doctype html>
<html>
<head>
<title>CDN example</title>
</head>
<style>
@keyframes bounce {
0%, 100% {
transform: none;
}
50% {
transform: translateY(100%);
}
}
@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: none;
}
50% {
-webkit-transform: translateY(100%);
}
}
[data-animated] {
animation: bounce 10s;
animation-fill-mode: both;
animation-play-state: paused;
animation-iteration-count: infinite;
display: inline-block;
height: 100px;
width: 100px;
background: #333;
border-radius: 50%;
color: #fff;
font-family: sans-serif;
line-height: 100px;
text-align: center;
}
[data-animated]:nth-child(2) {
animation-delay: 2.5s;
}
[data-animated]:nth-child(3) {
animation-delay: 5s;
}
</style>
<body>
<div data-animated>Paused 0.5</div>
<div data-animated>Paused 0.5</div>
<div data-animated>Paused 0.5</div>
<script src="https://wzrd.in/standalone/web-animations-js@latest"></script>
<script src="https://wzrd.in/standalone/jogwheel@latest"></script>
<script>
var elements = document.querySelectorAll('[data-animated]');
var player = jogwheel.create(elements);
player.seek(0.5);
setTimeout(function(){
player.play();
for (var i = 0; i < elements.length; i += 1) {
elements[i].innerText = 'Playing';
}
}, 5000);
</script>
</body>
</html>