I found a tutorial about creating a breath pacer using CSS:
The inhale and the exhale in the code are the same (4s). I want to control with the code the inhale, post-inhale hold, exhale, post exhale hold timing.
How can I do it?
Tutorial link – https://css-tricks.com/recreating-apple-watch-breathe-app-animation/
codepen – https://codepen.io/geoffgraham/pen/zKMEPE
body {
background: #000;
display: flex;
align-items: center;
height: 100vh;
justify-content: center;
}
.watch-face {
height: 125px;
width: 125px;
animation: pulse 4s cubic-bezier(0.5, 0, 0.5, 1) alternate infinite;
}
.circle {
height: 125px;
width: 125px;
border-radius: 50%;
position: absolute;
mix-blend-mode: screen;
transform: translate(0, 0);
animation: center 6s infinite;
}
.circle:nth-child(odd) {
background: #61bea2;
}
.circle:nth-child(even) {
background: #529ca0;
}
.circle:nth-child(1) {
animation: circle-1 4s ease alternate infinite;
}
.circle:nth-child(2) {
animation: circle-2 4s ease alternate infinite;
}
.circle:nth-child(3) {
animation: circle-3 4s ease alternate infinite;
}
.circle:nth-child(4) {
animation: circle-4 4s ease alternate infinite;
}
.circle:nth-child(5) {
animation: circle-5 4s ease alternate infinite;
}
.circle:nth-child(6) {
animation: circle-6 4s ease alternate infinite;
}
@keyframes pulse {
0% {
transform: scale(.15) rotate(180deg);
}
100% {
transform: scale(1);
}
}
@keyframes circle-1 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-35px, -50px);
}
}
@keyframes circle-2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(35px, 50px);
}
}
@keyframes circle-3 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-60px, 0);
}
}
@keyframes circle-4 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(60px, 0);
}
}
@keyframes circle-5 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-35px, 50px);
}
}
@keyframes circle-6 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(35px, -50px);
}
}
<div class="watch-face">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
3
Answers
The inhale, exhale are determined by the
animation
duration, is was4s
, I’ve introduced an CSS variable to easy change that:--duration
. For example change it to8s
to double the duration.The hold timing is not that easy, since there is no CSS property to ‘hold’ between an
ease alternate infinite
animation
.The easiest way to get your output is by adding a
keyframe
that does not apply any change, eg: it waits.100%
keyframe means it’s back to the start, so if we copy/paste thekeyframe
and change the middel frame to50%
, the animation won’t do anything between50
and100
procent, so it’s ‘hangs’Please play around with the values, I’ve set it to
75%
so it won’t animate between the75%
and100%
duration (--duration
long)The same idea can be applied to the
0%
frame so it ‘hangs’ before the growing phase.This can be controlled by changing the animation
pulse
. For example, now I reduced the inhalation and increased the delay before exhalation:I have added another animation percentage to overcome the alternate sequence. I hope this helps.