Last active
September 1, 2017 18:17
-
-
Save filipecrosk/a8f700716449e4a2c8a549c22f4a2a3d to your computer and use it in GitHub Desktop.
Arrows animation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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