Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Tailoring CSS Animation

12:49 am on Sep 6, 2016 (gmt 0)

New User

Top Contributors Of The Month

joined:Aug 21, 2016
votes: 0

I'm trying to tailor a css animation but I'm having some trouble.

This is the animation now and it works great:

div{width:58px;height:58px;margin:100px auto;background:#f00;border-radius:100%;animation:load 1s infinite ease-in-out}
@keyframes load{0% {transform:scale(0)} 100% {transform:scale(1);opacity:0}}

It creates a colored dot that fades while it grows. What I would like it do it is cycle through three colors: red, green, and blue, with each one taking a second and loop infinity.

I tripled the animation time and added additional stops but it goes through all three colors extremely fast and has a long pause:

div{width:58px;height:58px;margin:100px auto;border-radius:100%;animation:load 3s infinite ease-in-out}
@keyframes load{
0% {transform:scale(0);background:#f00} 33% {transform:scale(1);opacity:0}
34% {transform:scale(0);background:#0f0} 66% {transform:scale(1);opacity:0}
67% {transform:scale(0);background:#00f} 100% {transform:scale(1);opacity:0}}

How can I achieve each dot taking a second with a different color?
3:32 am on Sept 6, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
votes: 311

Maybe try using animation-timing-function? I have not used any animation settings myself, but it looks like it would handle that timing problem: [w3.org...]