Creating a “Lion’s Breath” Animation with CSS
I had a lot of fun exploring CSS animations when creating breathing techniques for a React app. So, I decided to share more of them. In a previous post, I showed how to create the expanding and contracting circle you see above. That was the basic animation for the diaphragmatic breathing technique. The “Lion’s breath” animation, however, went beyond that to include the visualization of a person’s eye’s rolling back as they stick their tongue way out. This is actually a real thing, by the way. See the video below:
How to Create the Tongue and Eyes
Building out the shapes for the tongue, eyeballs, and irises was pretty simple. I created <p> tags filled with an identifying word. Then I gave each element a className, so I could style it up with CSS.
Notice below that I gave the word “tongue” a pink background, which created a rectangular shape behind the word, and then I made the text transparent (color: transparent), so that only the pink shape would be visible (no text). I made it position: absolute, so that I could lay it over the blue breathing circle animation. Then, I used top and left properties to position it to my liking. The properties related to border-radius curved the bottom of the rectangle. I also gave it a slim border with a darker pink color for fun. We’ll get to the animation part soon.
I applied similar properties to manipulate the shapes, color, and positioning of the eyeballs and irises. View the source code here.
“Animation-Delay” is Not Your Friend
The problem I ran into was timing — how to delay the eye rolling and tongue protruding animations until the breathing (blue circle) animation began to contract (exhale). To be clear, I had to figure out how to delay the eye and tongue animations about 3.5 seconds, so that they would only run during the exhale. That proved to be complicated — but doable!
As I quickly learned, the animation-delay CSS property only works the very first time; the animation runs continuously after that. But I needed the delay to occur for every iteration of the animation. So, I had to figure out a way to “fake” a delay. What I learned was that you can use keyframes where nothing happens.
Up until 50% of the way through the animation (about 3.5 seconds, in this case), the height of the pink tongue would scale 5%. Towards the end of the animation, the tongue would fully extend and linger for the remaining seconds. It’s important to note that the full animation duration was 7 seconds (the same duration as the blue breathing circle).
I applied similar timing to the eye-rolling effect. If you take a look at my repo, you’ll notice I apply the iris animation below to both eyes (.anim-iris-left and .anim-iris-right). I’m simply moving the irises up on each iteration.
With all the styling and timing in place, I achieved a fun visualization of the Lion’s breath breathing technique.
Resources:
