Skip to content

Instantly share code, notes, and snippets.

@jueyang
Last active Oct 15, 2017
Embed
What would you like to do?
bike (circa 2012)
<style>
@-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2000ms linear infinite;
animation:rotating 2000ms linear infinite;
}
.paused{
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
header {
margin-left:10%;
}
header img {
position:absolute;
}
#frame {
margin-top:100px;
margin-left:100px;
}
#front-wheel {
margin-top:160px;
margin-left:60px;
}
#rear-wheel {
margin-top:160px;
margin-left:204px;
}
button {
background:#fff;
padding:10px;
}
</style>
<body>
<header class='central pad-top'>
<img id="frame" src="image-frame.png">
<img id='rear-wheel' src="image-rear-wheel.png">
<img id="front-wheel" src="image-front-wheel.png">
</header>
<button id="button">click me</button>
</body>
<script type="text/javascript">
function start(id){
document.getElementById(id).setAttribute("class","rotating");
}
function pause(id){
document.getElementById(id).setAttribute("class","rotating paused");
}
function startpause(){
if (document.getElementById("rear-wheel").className == "rotating") {
pause("rear-wheel");
pause("front-wheel")
} else {
start("rear-wheel");
start("front-wheel");
}
}
document.getElementById("button").onclick = startpause;
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment