breath-web-app/docs/lib/animate.css

A Web & Mobile App to help you focus on and calm your breathing.

/*!
  Breath Web App | © Nick Freear | License: GPL-3.0+.
*/

/* The breathing animation.
*/

#breath { r: 5%; animation: none; }

/* Hold / pause for 10% of the animation duration.
*/
@keyframes Breath-In-Out-10pc {
  0%   { r: 5%;  }
  40%  { r: 30%; } /* 4s - inhale */
  50%  { r: 30%; } /* 1s - hold */
  90%  { r: 5%;  } /* 4s - exhale */
  100% { r: 5%;  } /* 1s - hold */
}

/* Hold / pause for 20%.
*/
@keyframes Breath-In-Out-20pc--Symmetric {
  0%   { r: 5%;  }
  10%  { r: 5%;  }
  40%  { r: 30%; } /* 3s - inhale */
  60%  { r: 30%; } /* 2s - hold */
  90%  { r: 5%;  } /* 3s - exhale */
  100% { r: 5%;  } /* 2s - hold */
}

@keyframes Breath-In-Out--Non-Sym {
  0%   { r: 5%;  }
  30%  { r: 30%; } /* 3s - inhale */
  50%  { r: 30%; } /* 2s - hold */
  80%  { r: 5%;  } /* 3s - exhale */
  99%  { r: 5%;  } /* 2s - hold */
}

.bug #breath {
  animation-name: Breath-In-Out--Non-Sym;
}

.hold-for-20pc #breath {
  animation-name: Breath-In-Out-20pc--Symmetric;
}

.hold-for-10pc #breath {
  animation-name: Breath-In-Out-10pc;
}

/* A duration of 10 seconds equates to 6 breaths per minute ;).

   See: [moss-2004] & [sutarto-2012] in the README.
*/
#breath {
  animation-play-state: paused;
  /* animation-name: Breath-In-Out-10pc; */
   animation-duration: 10s; /* or: Xms */ /* Was: 12s! */
   animation-iteration-count: infinite;
   animation-direction: alternate; /* or: normal */
   animation-timing-function: ease-in-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
   animation-fill-mode: forwards; /* or: backwards, both, none */
   animation-delay: 10ms; /* or: Xms */
}

.is-playing #breath {
  animation-play-state: running;
}