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

чтобы доходило к пример до середины зеленой области. На 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 }

Ответ

В 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); } }