Skip to content

Instantly share code, notes, and snippets.

@airen

airen/jsbin.tinus.css

Created April 12, 2014 16:07
Show Gist options
  • Save airen/10543344 to your computer and use it in GitHub Desktop.
Save airen/10543344 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.tinus.css
@keyframes move {
0%{
transform: translateY(90px);
}
15%{
transform: translate(90px,90px);
}
30%{
transform: translate(180px,90px);
}
45%{
transform: translate(90px,90px);
}
60%{
transform: translate(90px,0);
}
75%{
transform: translate(90px,90px);
}
90%{
transform: translate(90px,180px);
}
100%{
transform: translate(90px,90px);
}
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 20px auto;
}
span {
display: inline-block;
width: 20px;
height: 20px;
background: orange;
transform: translateY(90px);
animation-name: move;
animation-duration: 10s;
animation-timing-function: ease-in;
animation-delay: .2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:paused;
}
div:hover span {
animation-name: move;
animation-duration: 10s;
animation-timing-function: ease-in;
animation-delay: .2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state: running;
}
Raw
jsbin.tinus.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>animation-play-state</title>
</head>
<body>
<div><span></span></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment