# Animations
CSS animations makes it possible to from one set of CSS styles to another over a period of time and over a defined number of repetitions.
For a quick example, let's make our name in the intro section animate between two colors infinitely.
First, we define our animation that we will call change-colors
.
@keyframes change-colors {
0% {
color: #7c3aed;
}
50% {
color: #f59e0b;
}
100% {
color: #7c3aed;
}
}
Then we declare in the CSS rule that styles our name that we want to use this animation:
.intro-section .highlight-name {
animation-name: change-colors;
animation-duration: 2s;
animation-iteration-count: infinite;
}
# Additional Links
← Transitions Favicons →