Skip to content

Instantly share code, notes, and snippets.

@Stanback

Stanback/animation.css

Created April 12, 2018 16:12
Show Gist options
  • Save Stanback/de0ffa2162f0acee99c4a6e70d9894be to your computer and use it in GitHub Desktop.
Save Stanback/de0ffa2162f0acee99c4a6e70d9894be to your computer and use it in GitHub Desktop.
Download ZIP
CSS animation example
Raw
animation.css
body {
padding: 5rem;
}
.animation {
height: 1.25rem;
margin: .625rem 0 0;
}
.animation-dot {
animation: dot 2s infinite;
display: inline-block;
border-radius: 50%;
position: relative;
background: #aaa;
height: 1.25rem;
margin: 0 .25rem;
width: 1.25rem;
}
.animation-dot:nth-child(2) {
animation-delay: .2s;
}
.animation-dot:nth-child(3) {
animation-delay: .4s;
}
.animation-dot:nth-child(4) {
animation-delay: .6s;
}
.animation-dot:nth-child(5) {
animation-delay: .8s;
}
@keyframes dot {
0% {
background-color: #aaa;
}
50% {
background-color: #7e5;
transform: translateY(-.75rem);
}
100% {
background-color: #aaa;
}
}
Raw
animation.html
<html>
<head>
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" href="animation.css">
</head>
<body>
<div class="animation">
<div class="animation-dot"></div>
<div class="animation-dot"></div>
<div class="animation-dot"></div>
<div class="animation-dot"></div>
<div class="animation-dot"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment