Last active
June 30, 2021 21:54
-
-
Save MrEbbinghaus/b71c006e2e0f97c7af4b42e0904fc42f to your computer and use it in GitHub Desktop.
High CPU loads (30-60%) for three simple animations
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
| <html> | |
| <head> | |
| <style> | |
| .module-typing-animation { | |
| display: inline-flex; | |
| flex-direction: row; | |
| align-items: center; | |
| height: 8px; | |
| width: 38px; | |
| padding-left: 1px; | |
| padding-right: 1px; | |
| } | |
| .module-typing-animation__dot { | |
| border-radius: 50%; | |
| height: 6px; | |
| width: 6px; | |
| opacity: 0.4; | |
| background-color: black; | |
| will-change: transform, opactiy; | |
| } | |
| @keyframes typing-animation-first { | |
| 0% { | |
| opacity: 0.4; | |
| } | |
| 20% { | |
| transform: scale(1.3); | |
| opacity: 1; | |
| } | |
| 40% { | |
| opacity: 0.4; | |
| } | |
| } | |
| @keyframes typing-animation-second { | |
| 10% { | |
| opacity: 0.4; | |
| } | |
| 30% { | |
| transform: scale(1.3); | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.4; | |
| } | |
| } | |
| @keyframes typing-animation-third { | |
| 20% { | |
| opacity: 0.4; | |
| } | |
| 40% { | |
| transform: scale(1.3); | |
| opacity: 1; | |
| } | |
| 60% { | |
| opacity: 0.4; | |
| } | |
| } | |
| .module-typing-animation__dot--first { | |
| animation: typing-animation-first 1600ms ease infinite; | |
| } | |
| .module-typing-animation__dot--second { | |
| animation: typing-animation-second 1600ms ease infinite; | |
| } | |
| .module-typing-animation__dot--third { | |
| animation: typing-animation-third 1600ms ease infinite; | |
| } | |
| .module-typing-animation__spacer { | |
| flex-grow: 1; | |
| } | |
| </style> | |
| </head> | |
| <body > | |
| <div class="module-typing-animation"> | |
| <div class="module-typing-animation__dot module-typing-animation__dot--first"></div> | |
| <div class="module-typing-animation__spacer"></div> | |
| <div class="module-typing-animation__dot module-typing-animation__dot--second"></div> | |
| <div class="module-typing-animation__spacer"></div> | |
| <div class="module-typing-animation__dot module-typing-animation__dot--third"></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment