CSS Animations: Colour Change & Pulse

I will be using CSS Animations throughout my app. I am trying to figure out which CSS animations will actually be of use to me.

The first thing that will be animated are the circles in the Breathing exercises.


As you can see above, one of the circles is blue. Each circle will change colour based on the the exercise. For example, if a simple breathing exercise is like this: breathe in for 4, hold for 4, breathe out for 4 – there will be 4 circles, and each circle will change colour for each second, equaling 4 seconds.

I had a look at colour changing animations using CSS3 here, and I thought this may be a way to do it. However, since my circles only have a stroke and not a fill, I don’t know if this will work, or even if I can create circles in CSS with just a stroke.

Another option is to use pulses, which I found here – the same sort of way with the colour – except the circle will pulse every second instead of changing colour (or maybe do both…?) but again I’ll have to see if I can create circles without fills first.

Another way to do this that’s easier is just to create a GIF! This might be my Plan B if I can’t figure out the other ways.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s