Last active
October 19, 2020 08:27
-
-
Save Benbb96/ecdb9b8ceb35d4de9a682b16af9d79fd to your computer and use it in GitHub Desktop.
CSS Typing effect
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Parcel Sandbox</title> | |
| <meta charset="UTF-8" /> | |
| <link href="/styles.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="type"> | |
| This is one cool effect in CSS. | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
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
| :root { | |
| /** This is the number of characters in the text */ | |
| --characters: 31; | |
| /** Change the number of repetition of the animation **/ | |
| --repetition: 4; | |
| } | |
| .container { | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-family: monospace; | |
| font-size: 2em; | |
| } | |
| .type { | |
| max-width: var(--characters)ch; | |
| animation: typing 4s steps(var(--characters)) var(--repetition); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| } | |
| .container:after { | |
| content: "|"; | |
| animation: blink 1s infinite; | |
| animation-timing-function: step-end; | |
| } | |
| @keyframes typing { | |
| 0% { | |
| max-width: 0; | |
| } | |
| 75%, | |
| 100% { | |
| max-width: calc(var(--characters) * 1ch); | |
| } | |
| } | |
| @keyframes blink { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 25% { | |
| opacity: 0; | |
| } | |
| 75% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment