How to make funky animated text (beginner css tutorial)

are you looking to get something like this? or like this or even like this?

of course you do!!! so here's how to do it~

Firstly, we have to set up the animation with your chosen name. This is done within your style tags.

@keyframes animationname {}

You can create keyframes by using percentages of the total animation time. You can create as many of these frames as you want (well, up to 100) but if you want your animation to loop seamlessly you will want the 0% and 100% to have the same value.

@keyframes animationname{
0% {color: red;}
50% {color: blue;}
100% {color: red;}
}

But nothing noticeable is happening yet: you will now need to apply this animation to an existing element in your code. The example below applies to all bold elements, which are created using <b>.

b{
animation: animationname 4s infinite linear;
}

or

b{
animation-name: animationname;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

The two scrips above do the exact same thing but i have included the bottom on to help you visualise what the different sections do (also note that in the bottom example the properties can be added in any order but in the top they have to be in the order shown)

Animation-name as you may imagine refers to the name of your animation. This is the name you decided previously when defning your keyframes.
Animation-duration is the total time taken to get from 0% to 100% and is given in seconds as in the example.
Animation-iteration-count refers to the number of times the animation will loop and can be any full number or the word infinite.
animation-timing-function refers to the speed at which different parts of the animation play and should be set to linear if you want the animation to maintain a consistent speed as it plays.

there are a few other properties that are not relevant for this specific use case and can be omitted but i will include a link at the end of this blog to a page that goes into more detail :)

In order to get the effect of changing background or border color like shown at the start the same steps are taken and the only change is made in the animation keyframes themselves.

@keyframes animationname{
0% {backgroud-color: red;}
50% {background-color: blue;}
100% {background-color: red;}
}

@keyframes animationname{
0% {border-color: red;}
50% {border-color: blue;}
100% {border-color: red;}
}

I hope this blog has been helpful, this is my first time trying to do a tutorial sort of thing so apologies if my wording is a little awkward TwT and feel free to leave a comment or message me if you have any more questions, i usually respond within a few days)

Also i feel like it should be mentioned that this is just the tip of the iceberg when it come to all the super fun stuff you can do with css animations and i encourage you all to experiment and hope to make more tutorials in the future!! buttt for now you can read a bit more about the technical side of things on this w3schools page ~