Creating A Simple Custom Animation With CSS For Beginners

Photo by Damon Lam on Unsplash

Keyframes

@keyframes flash {
0% {
background-color: #faff66;
}
50% {
background-color: transparent;
}
100% {
background-color: #faff66;
}
}

Animation Properties

  animation-name: flash; // Name
animation-duration: 1s; // Desired duration
animation-iteration-count: infinite; // How many times?

Another Simple Effect With More Steps

@keyframes fontChange {
0% {
font-family: 'Major Mono Display', monospace;
}
20% {
font-family: 'Kaushan Script', cursive;
}
40% {
font-family: 'Lobster', cursive;
}
60% {
font-family: 'Ranchers', cursive;
}
80% {
font-family: 'Bitter', serif;
}
100% {
font-family: 'Major Mono Display', monospace;
}

Conclusion

Full Stack Web Developer && Creative Thinker && Flatiron School Grad && Continuous Learner

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store