Как можно вращать цвет фона в полукруге, как спидометр

Question

Я создал полукруг с CSS3, чтобы использовать его как график. Моя проблема в том, что я хочу анимировать background-color и rotate.

В конце концов, я бы хотел увидеть такую ​​вещь ... Это jsfiddle https://jsfiddle.net/wu1tbsne/28/

//FIRST BAR
$('#half-donut').addClass('first-start');

setTimeout(function() {
  $('#half-donut').addClass('first-pause');
}, 1700);

body {
  background-color: #000;
}


#half-donut {
    width: 200px;
    height: 100px;
    background-color: #fff;
    border-radius: 200px 200px 0% 0%;
    margin-right: 3px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}


#figlio {
    width: 140px;
    height: 75px;
    background: #000;
    border-radius: 140px 140px 0% 0%;
}


@keyframes first {
  0% {
    background-color: green;
  }
  33% {
    background-color: yellow; 
  }
  66% {
    background-color: orange; 
  }
  100% {
    background-color: red; 
  }
}


.first-start {
  animation: first 2s linear;
}

.first-pause {
  animation-play-state: paused;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="half-donut">
    <div id="figlio"></div>
</div>

В конце я хочу увидеть такую ​​вещь:

Answer 1

I решить эта проблема теперь работает очень хорошо:

Это КОД:

$('#first').addClass('first-start');

setTimeout(function() {
  $('#first').addClass('first-pause');
}, 1700);


//SECOND BAR
$('#second').addClass('second-start');

setTimeout(function() {
  $('#second').addClass('second-pause');
}, 400);

#page {
  margin-top: 50px;
  width: 300px;
  height: 300px;
  background-color: #000;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 4;
  overflow: hidden;
}

#box-first,
#box-second {
  width: 200px;
  height: 100px;
  background-color: #fff;
  border-radius: 200px 200px 0 0;
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  z-index: 3;
  overflow: hidden;
}

#first,
#second {
  border-radius: 200px 200px 0 0;
  margin: 0;
  background: red;
  width: 200px;
  height: 100px;
  transform: rotate(180deg);
  transform-origin: 50% 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  border: 0;
  z-index: 1;
}

#n1,
#n2 {
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  position: absolute;
  left: 50px;
  right: 0;
  text-align: center;
  top: 50px;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100px;
  height: 50px;
  background: #000;
  border-radius: 100px 100px 0 0;
  z-Index: 1;
  overflow: hidden;
}




@keyframes first {
  0% {
    background-color: green;
    transform: rotate(180deg);
  }
  33% {
    background-color: yellow;
    transform: rotate(240deg);
  }
  66% {
    background-color: orange;
    transform: rotate(300deg);
  }
  100% {
    background-color: red;
    transform: rotate(360deg);
  }
}

@keyframes second {
  0% {
    background-color: green;
    transform: rotate(180deg);
  }
  33% {
    background-color: yellow;
    transform: rotate(240deg);
  }
  66% {
    background-color: orange;
    transform: rotate(300deg);
  }
  100% {
    background-color: red;
    transform: rotate(360deg);
  }
}


.first-start,
.second-start {
  animation: first 2s linear;
}

.first-pause,
.second-pause {
  animation-play-state: paused;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
  <div id="box-first">
    <div id="first">

    </div>
    <div id="n1">
      1500
    </div>
  </div>
  <div id="box-second">
    <div id="second">

    </div>
    <div id="n2">
      270
    </div>
  </div>
</div>

Это jsfiddle: это jsfiddle: https://jsfiddle.net/k85t9zgq/22/

Answer 2

Мое решение заключается в следующем:

https://codebrace.com/editor/b01ecd3e6

body {
  background-color: #000;
}


#half-donut {
    width: 200px;
    height: 100px;
    background-color: #0f0;
    border-radius: 200px 200px 0% 0%;
    margin-right: 3px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position:relative;
    overflow: hidden;
}
#meterptr{
    width:200px;
    height:200px;
    position: absolute;
    background-color:red;
    top:0;
    left:-50%;
    transform-origin: center right;
    transform: rotate(-90deg);
}
#figlio {
    width: 140px;
    height: 75px;
    background: #000;
    border-radius: 140px 140px 0% 0%;
    position:absolute;
}

Answer 3

Это один из способов сделать это. Вы можете попытаться скрыть оригинальный div с помощью элемента, который анимирует, как вы хотите.

В приведенном ниже примере я просто использовал psuedo ::before для элемента #half-donut, который я перемещаю слева направо. Надеюсь, это даст вам представление о том, как подойти к этой задаче.

$(document).ready(function(){

$('#half-donut').addClass('first-start');
$('#half-donut::before').addClass('start-anim');

 setTimeout(function() {
   $('#half-donut').addClass('first-pause');
 }, 1700);

});

body {
  background-color: #000;
}

#half-donut {
    z-index: 0;
    position:relative;
    width: 200px;
    height: 100px;
    background-color: #fff;
    border-radius: 200px 200px 0% 0%;
    margin-right: 3px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

#half-donut::before {
    position: absolute;
    z-index: 1;
    top: 0;
    right: -20%;
    overflow: hidden;
    content: "";
    background-color: black;
    width: 100%;
    height: 100%;
    margin-right: 3px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    animation: start 2s linear;
}


#figlio {
    z-index: 2;
    width: 140px;
    height: 75px;
    background: #000;
    border-radius: 140px 140px 0% 0%;
}


@keyframes start {
  0% {
    right: -20%;
  }
  33% {
    right: -33%; 
  }
  66% {
    right: -66%;
  }
  100% {
    right: -100%;
  }
}

@keyframes first {
  0% {
    background-color: green;
  }
  33% {
    background-color: yellow; 
  }
  66% {
    background-color: orange; 
  }
  100% {
    background-color: red; 
  }
}

.first-start {
  animation: first 2s linear;
}

.start-anim {
  animation: start 2s linear;
}

.first-pause {
  animation-play-state: paused;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="half-donut">
    <div id="figlio"></div>
</div>