css animation без jquery

Question

хочу сделать таймер в когде вращаю часть круга когда он делает пол оборта и остановится я вращаю основной круг но совместно основого вращается и тот который врашался пол круга как это исправить?

.main-circle {
  width: 500px;
  height: 500px;
  margin: auto;
  border-radius: 50%;
  background-color: #2BA359;
  background-image: linear-gradient(to right, transparent 50%, white 0);
  position: relative;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-delay: 4s;
  animation-duration: 4s;
  animation-name: right-spin;
  animation-timing-function: linear;
}

.main-circle::before,
.main-circle::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
}

.main-circle::before {
  z-index: 1;
  border-radius: 100% 0 0 100%;
  clip: rect(0px, 250px, 500px, 0px);
  background-color: #2BA359;
  transform-origin: center;
  animation-name: left-spin;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.main-circle::after{
  background-color: white;
  z-index: 1;
  border-radius: 100% 0 0 100%;
  clip: rect(0px, 250px, 500px, 0px);
  transform-origin: center;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes left-spin {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(180deg);

  }

}
@keyframes right-spin {

  50%,100%{
    transform: rotate(180deg);

  }
}

<div class="main-circle">

</div>

Answer 1

.main-circle {
  position: relative;
  width: 500px; height: 500px;
  margin: auto;
  overflow: hidden;
  border-radius: 50%;
  background-image: linear-gradient(to right, transparent 50%, white 0);
}

.main-circle::before,
.main-circle::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%; height: 100%;
  clip: rect(0, 250px, 500px, 0);
  transform-origin: center;
  border-radius: 100% 0 0 100%;
  z-index: 1;
  animation: 4s linear forwards;
}

.main-circle::before {
  background-color: #2BA359;
  animation-name: left-spin;
}

.main-circle::after {
  background-color: white;
  animation-name: right-spin;
  animation-delay: 4s;
}

@keyframes left-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(180deg); }
}

@keyframes right-spin {
  0% { background-color: white; transform: rotate(180deg); }
  0.001% { background-color: #2BA359; }
  100% { background-color: #2BA359; transform: rotate(360deg); }
}

<div class="main-circle"></div>

В будущем,

если стандартизируют CSS Properties and Values API (являющийся частью CSS Houdini) - создание подобных анимаций значительно упростится благодаря at-правилу @property (на момент написания ответа, следующий пример работает только в Chrome... и в Edge тоже должен работать, но в последнем я не могу проверить, т.к. #безвинды):

@property --angle {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

.main-circle {
  position: relative;
  width: 500px; height: 500px;
  margin: auto;
  overflow: hidden;
  border-radius: 50%;
  background-image: conic-gradient(#2BA359 var(--angle), transparent var(--angle)),
                    linear-gradient(to right, transparent 50%, white 0);
  animation: angle-fill 4s linear forwards;
}

@keyframes angle-fill {
  to { --angle: 100%; }
}

<div class="main-circle"></div>

БЛОГ НА HUSL

css animation без jquery

Ответы (1 шт):

В будущем,