Using CSS Animations to Visualize Breathing Techniques

<p className='anim-circle'>diaphragmatic animation</p>
.anim-circle {  color: transparent;  position: absolute;  top: -28%;  left: 50%;  width: 70px;  height: 70px;  border-radius: 50%;  background: rgba(188, 237, 243, 0.889);}
.anim-circle {  color: transparent;  position: absolute;  top: -28%;  left: 50%;  transform: translate(-50%, -50%);  width: 70px;  height: 70px;  border-radius: 50%;  background: rgba(188, 237, 243, 0.889);  animation: breathe 7s linear infinite;}@keyframes breathe { 0% {  box-shadow: 0 0 0 15px rgba(188, 237, 243, 0.3) }
}
@keyframes breathe { 0% {  box-shadow: 0 0 0 15px rgba(188, 237, 243, 0.3), 0 0 0 30px       rgba(188, 237, 243, 0.3), 0 0 0 45px rgba(188, 237, 243, 0.3), 0 0 0 60px rgba(188, 237, 243, 0.3), 0 0 0 75px rgba(188, 237, 243, 0.3); }
}
@keyframes breathe { 0% {box-shadow: 0 0 0 15px rgba(188, 237, 243, 0.3), 0 0 0 30px rgba(188, 237, 243, 0.3), 0 0 0 45px rgba(188, 237, 243, 0.3), 0 0 0 60px rgba(188, 237, 243, 0.3), 0 0 0 75px rgba(188, 237, 243, 0.3); } 50% {box-shadow: 0 0 0 25px rgba(188, 237, 243, 0.3), 0 0 0 50px rgba(188, 237, 243, 0.3), 0 0 0 75px rgba(188, 237, 243, 0.3), 0 0 0 100px rgba(188, 237, 243, 0.3), 0 0 0 125px rgba(188, 237, 243, 0.3); } 100% {box-shadow: 0 0 0 15px rgba(188, 237, 243, 0.3), 0 0 0 30px rgba(188, 237, 243, 0.3), 0 0 0 45px rgba(188, 237, 243, 0.3), 0 0 0 60px rgba(188, 237, 243, 0.3), 0 0 0 75px rgba(188, 237, 243, 0.3); }}

--

--

--

Freelance Software Engineer. Experience in JavaScript, React.js, and Ruby on Rails.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

blue sky ideation

Bringing Design Thinking into the embedded systems design process

Healthcare UX: An appointment booking app for a hospital ( redesign)

Design Club #4

There’s no such thing as the ROI of Design

There´s no such thing as the ROI of design. And how to estimate it.

READ/DOWNLOAD#$ Machine Elements in Mechanical Design (5th Edition) FULL BOOK PDF & FULL AUDIOBOOK

4 Steps To Designing a Strong User Experience

The new Zeplin feature that nobody talks about

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
Vanessa Martinez

Vanessa Martinez

Freelance Software Engineer. Experience in JavaScript, React.js, and Ruby on Rails.

More from Medium

CSS — Combinators & Grouping Selectors

What The Heck is CSS Specificity?

CSS selectors with details example

Effective Chrome DevTools with CSS