Анимация указателя по часовой стрелке

#javascript #html #css

чтобы доходило к пример до середины зеленой области. На js Или css лучше сделать?
https://codepen.io/st-iv/pen/QaxEPM



.progress__bar {
  display: inline-block;
  background: url("https://image.ibb.co/dTVvGm/js_skill.png") no-repeat;
  background-size: contain;
	height: 128px;
  width: 100%;
	position: relative;
}
.arrow {
  position: absolute;
	height: 32px;
	bottom: 0;
	left: 20%;
  https://image.ibb.co/dp9pbm/Untitled_1.png
}




    

Ответы

Ответ 1

В css анимации есть свойство transform-origin которое задает точку анимации.
В нашем случае это будет точка по которой будет вращаться картинка.

Просто надо определить точку анимации и вращать картинку по нему.



.progress__bar {
  display: inline-block;
  background: url("https://image.ibb.co/dTVvGm/js_skill.png") no-repeat;
  background-size: contain;
  height: 128px;
  width: 100%;
  position: relative;
}

.arrow {
  position: absolute;
  transform: rotateZ(-33deg);
  height: 32px;
  bottom: -5px;
  left: 85px;
  animation: example 5s linear 2s infinite alternate;
  transform-origin: 40px 26px;
}
span{
  position: absolute;
  top: 139px;
  left: 138px;
  width: 1px;
  height: 1px;
  background: green;
}
@keyframes example {
  from {
    transform: rotateZ(-33deg);
  }
  to {
    transform: rotateZ(148deg);
  }
}

  





Вот второй вариант с конечной остановкой.



.progress__bar {
  display: inline-block;
  background: url("https://image.ibb.co/dTVvGm/js_skill.png") no-repeat;
  background-size: contain;
  height: 128px;
  width: 100%;
  position: relative;
}

.arrow {
  position: absolute;
  transform: rotateZ(-33deg);
  height: 32px;
  bottom: -5px;
  left: 85px;
  animation: example 5s linear 2s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  transform-origin: 40px 26px;
}
span{
  position: absolute;
  top: 139px;
  left: 138px;
  width: 1px;
  height: 1px;
  background: green;
}
@keyframes example {
  from {
    transform: rotateZ(-33deg);
  }
  to {
    transform: rotateZ(148deg);
  }
}

  





Вот еще один вариант.
Можно задать другой animation-timing-function. Например ease-out. И сейчас конечная
часть анимации будет медленней чем начальная.

Так красиво.



.progress__bar {
  display: inline-block;
  background: url("https://image.ibb.co/dTVvGm/js_skill.png") no-repeat;
  background-size: contain;
  height: 128px;
  width: 100%;
  position: relative;
}

.arrow {
  position: absolute;
  transform: rotateZ(-33deg);
  height: 32px;
  bottom: -5px;
  left: 85px;
  -webkit-animation: in 3s linear 1s;
  animation-timing-function: ease-out;
  animation-direction: normal;
  animation-fill-mode: forwards;
  transform-origin: 40px 26px;
}
span{
  position: absolute;
  top: 139px;
  left: 138px;
  width: 1px;
  height: 1px;
  background: green;
}
@keyframes in {
  from {
    transform: rotateZ(-33deg);
  }
  to {
    transform: rotateZ(148deg);
  }
}

  



Ответ 2

.progress__bar {
  display: inline-block;
  background: url("https://image.ibb.co/dTVvGm/js_skill.png") no-repeat;
  background-size: contain;
  height: 128px;
  width: 100%;
  position: relative;
}

.arrow {
  position: absolute;
  transform: rotateZ(-40deg);
  height: 32px;
  bottom: -15px;
  left: 90px;
  animation: example 5s linear 2s infinite alternate;
}

@keyframes example {
  from {
    transform: rotateZ(-40deg);
    bottom: -15px;
    left: 90px;
  }
  to {
    transform: rotateZ(90deg);
    bottom: 3px;
    left: 110px;
  }
}