Skip to content

Instantly share code, notes, and snippets.

@filipecrosk

filipecrosk/about.html

Last active September 1, 2017 18:17
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 filipecrosk/a8f700716449e4a2c8a549c22f4a2a3d to your computer and use it in GitHub Desktop.
Save filipecrosk/a8f700716449e4a2c8a549c22f4a2a3d to your computer and use it in GitHub Desktop.
Download ZIP
Arrows animation
Raw
about.html
<div class="arrow-wrapper">
<span class="arrow top left arrow1"></span>
<span class="arrow top right arrow1"></span>
<span class="arrow middle left arrow2"></span>
<span class="arrow middle right arrow2"></span>
<span class="arrow bottom left arrow3"></span>
<span class="arrow bottom right arrow3"></span>
</div>
<style type="text/css">
.arrow1 { opacity: 0; -webkit-animation: arrow 1.3s infinite; -webkit-animation-delay: 0s; animation: arrow 1.3s infinite; animation-delay: 0s; }
.arrow2 { opacity: 0; -webkit-animation: arrow 1.3s infinite; -webkit-animation-delay: 0.2s; animation: arrow 1.3s infinite; animation-delay: 0.2s; }
.arrow3 { opacity: 0; -webkit-animation: arrow 1.3s infinite; -webkit-animation-delay: 0.3s; animation: arrow 1.3s infinite; animation-delay: 0.3s; }
@-webkit-keyframes arrow { 0%, 50% { opacity: 0; }
100% { opacity: 1; } }
@keyframes arrow { 0%, 50% { opacity: 0; }
100% { opacity: 1; } }
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment