Skip to content

Instantly share code, notes, and snippets.

@rambhairao

rambhairao/animation-101.html

Last active July 12, 2017 12:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rambhairao/0cc6f0f7fed9a933d0074a32f854e295 to your computer and use it in GitHub Desktop.
Save rambhairao/0cc6f0f7fed9a933d0074a32f854e295 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin// source https://jsbin.com/jofasog
Raw
animation-101.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.a{
width:100px;
height:100px;
background-color: blue;
display:inline-block;margin:20px
}
#d1{
top:30px;
left:20px;
animation: 50s foo linear;
animation-fill-mode:forwards;
animation-play-state:paused;
animation-delay: -4s;
}
@keyframes foo
{
to {background:red;}
}
</style>
</head>
<body>
<div id="d1" class="a"> </div>
<div id="d2" class="a"> </div>
<div id="d3" class="a"> </div>
<div id="d4" class="a"> </div>
<div id="d5" class="a"> </div>
<script id="jsbin-source-css" type="text/css">.a{
width:100px;
height:100px;
background-color: blue;
display:inline-block;margin:20px
}
#d1{
top:30px;
left:20px;
animation: 50s foo linear;
animation-fill-mode:forwards;
animation-play-state:paused;
animation-delay: -4s;
}
@keyframes foo
{
to {background:red;}
}
</script>
</body>
</html>
Raw
jsbin.jofasog.css
.a{
width:100px;
height:100px;
background-color: blue;
display:inline-block;margin:20px
}
#d1{
top:30px;
left:20px;
animation: 50s foo linear;
animation-fill-mode:forwards;
animation-play-state:paused;
animation-delay: -4s;
}
@keyframes foo
{
to {background:red;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment