Adding animation to github site

#1

This is my first time doing something like this, & I would like to make something like the typing text on this site: https://mtzioncode.github.io/

My index.html is (copied from somewhere else)

<h1>Uh</h1
<style src = "style.css"></style>
<link rel="stylesheet" type="text/css" href="style.css" />
/* The animation code */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
} 

My  style.css is (again, copied from somewhere else)

/* The animation code */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

The website looks like this

Screenshot 2021-03-01 231447
Screenshot 2021-03-01 231447780×193 6.55 KB

How do i add something like that to my website? Thanks in advance.

#2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
#3

That website is using JS to do the typing: https://mtzioncode.github.io/profile.js. I personally wouldn’t use their JS implementation as a model as I think they are over complicating it. I’m sure if you search for ‘javascript typewriter effect’ you can find plenty of better examples. Or you could just implement it yourself. It’s not too hard. You just iterate through a string, progressively adding each character to the element. There are several options for adding the delay between characters. I think the best option would be to create a “sleep” function that returns a promise after a setTimeout and then use async/await to call sleep() after you add each character: https://appdividend.com/2020/07/31/javascript-sleep-how-to-make-your-functions-sleep/.

#4

You can also look at some pure CSS solutions. For simple effects, it works pretty well.