zwip
Version:
Utility for creating JS animations on top of W3C [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) function.
56 lines (52 loc) • 972 B
HTML
<html>
<head>
<title>Zwip: Animation chain example</title>
<style>
.circle {
position: absolute;
border-radius: 50%;
width: 200px;
height: 200px;
left:0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 1px dashed black
}
.circle > div {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: #6495ed;
}
.circle > strong {
/*position: absolute;*/
/*top: 0;*/
/*bottom: 0;*/
/*right: 0;*/
/*left: 0;*/
z-index: 9999
}
.loop-state, .animation-state {
position: absolute;
bottom: 0;
}
.animation-state {
left: 0;
}
.animation-state > pre {
display: inline-block;
margin: 1em;
}
.loop-state {
right: 0;
}
</style>
</head>
<body>
<h1>Zwip: Animation chain example</h1>
</body>
</html>