更改 css 呼吸起搏器中吸气和呼气的长度

Question

我找到了一个关于使用 CSS 创建呼吸节奏器的教程：

代码中的吸气和呼气是相同的（4s）。我想用代码控制吸气、吸气后保持、呼气、呼气后保持时间。

我该怎么做？

教程链接 - 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>

Answer 1

我想用代码控制吸气、吸气后保持、呼气、呼气后保持时间。

吸气、呼气由animation持续时间决定，即 was 4s，我引入了一个CSS 变量来轻松更改：--duration。例如，将其更改为8s双倍持续时间。

保持时间

保持时间并不那么容易，因为在ease alternate infinite animation.

获得输出的最简单方法是添加一个keyframe不应用任何更改的值，例如：它等待。

100%关键帧意味着它回到开始处，因此如果我们复制/粘贴keyframe并将 middel 帧更改为50%，动画将不会在50和100procent 之间执行任何操作，因此它会“挂起”

请尝试使用这些值，我已将其设置为75%这样它就不会在75%和100%持续时间（--duration长）之间动画

同样的想法可以应用于框架，0%使其在生长阶段之前“悬挂”。

:root {
  --duration: 4s
}

body {
  background: #000;
  display: flex;
  align-items: center;
  height: 100vh;
  justify-content: center;
}

.watch-face {
  height: 125px;
  width: 125px;
  animation: pulse var(--duration) 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 var(--duration) ease alternate infinite;
}

.circle:nth-child(2) {
  animation: circle-2 var(--duration) ease alternate infinite;
}

.circle:nth-child(3) {
  animation: circle-3 var(--duration) ease alternate infinite;
}

.circle:nth-child(4) {
  animation: circle-4 var(--duration) ease alternate infinite;
}

.circle:nth-child(5) {
  animation: circle-5 var(--duration) ease alternate infinite;
}

.circle:nth-child(6) {
  animation: circle-6 var(--duration) ease alternate infinite;
}

@keyframes pulse {
  0% {
    transform: scale(.15) rotate(180deg);
  }
  75% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes circle-1 {
  0% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(-35px, -50px);
  }
  100% {
    transform: translate(-35px, -50px);
  }
}

@keyframes circle-2 {
  0% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(35px, 50px);
  }
  100% {
    transform: translate(35px, 50px);
  }
}

@keyframes circle-3 {
  0% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(-60px, 0);
  }
  100% {
    transform: translate(-60px, 0);
  }
}

@keyframes circle-4 {
  0% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(60px, 0);
  }
  100% {
    transform: translate(60px, 0);
  }
}

@keyframes circle-5 {
  0% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(-35px, 50px);
  }
  100% {
    transform: translate(-35px, 50px);
  }
}

@keyframes circle-6 {
  0% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(35px, -50px);
  }
  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>