Skip to content

Instantly share code, notes, and snippets.

@imjoshdean

imjoshdean/webkit-keyframes-animation.html

Created December 16, 2015 16:28
Show Gist options
  • Save imjoshdean/cd4c1d143dff1b215dc5 to your computer and use it in GitHub Desktop.
Save imjoshdean/cd4c1d143dff1b215dc5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
webkit-keyframes-animation.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="CanJS jQuery">
<meta charset="utf-8">
<!--
Created using JS Bin
http://jsbin.com
Copyright (c) 2015 by anonymous (http://jsbin.com/riqekazexa/1/edit)
Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<title>CanJS jQuery</title>
<style id="jsbin-css">
@-webkit-keyframes blink {
0% {
visibility: visible;
}
100% {
visibility: hidden;
}
}
.person {
border: 1px solid black;
display: inline-block;
height: 50px;
width: 200px;
}
.person .availability {
-webkit-animation: blink 500ms steps(5, start) infinite;
background: lime;
display: inline-block;
float: left;
height: 50px;
margin-right: 5px;
width: 20px;
}
.person h1 {
display: inline-block;
float: left;
font-size: 24px;
line-height: 50px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="person">
<span class="availability">&nbsp;</span>
<h1>Josh Dean</h1>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment